Выберите все элементы «tr», кроме первого «tr» в таблице с помощью CSS

Question

Как выбрать все элементы tr, кроме первого tr в таблице с помощью CSS?

Я пытался использовать этот метод, но обнаружил, что он не работает:

http://www.daniel -lemire.com / блог / Архивы / 2008/08/22 / как к отборным четным или нечетным-рядам-в-табличному с помощью CSS-3-/

Answer 1

Добавляя класс либо к первому tr, либо к последующим tr с.Не существует кросс-браузерного способа выбора нужных вам строк только с помощью CSS.

Однако, если вам не нужны Internet Explorer 6, 7 или 8:

tr:not(:first-child) {
    color: red;
}

Answer 2

Я удивлен, что никто не упомянул об использовании одноуровневых комбинаторов, которые поддерживаются IE7 и более поздними версиями:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Они оба функционируют точно так же (в любом случае в контексте таблиц HTML), как:

tr:not(:first-child)

Answer 3

идеальное решение, но не поддерживается в IE

tr:not(:first-child) {css}

Вторым решением было бы стилизовать все tr и затем переопределить css для first-child:

tr {css}
tr:first-child {override css above}

Answer 4

звучит как «первая строка», о которой вы говорите, это заголовок таблицы - так что вам действительно стоит подумать об использовании thead и tbody в разметке ( нажмите здесь ), чтов результате получается «лучшая» разметка (семантически правильная, полезная для таких вещей, как программы чтения с экрана) и более простые, удобные для разных браузеров возможности выбора css (table thead ... { ... })

Answer 5

Хотя на вопрос уже есть достойный ответ, я просто хочу подчеркнуть, что тег :first-child относится к типу элемента, который представляет детей.

Например, в коде:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Если вы хотите повлиять только на вторые два элемента с полем, но не на первый, вы должны сделать:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

то есть, поскольку input s являются дочерними, вы должны поместить first-child во входную часть селектора.

Answer 6

Другой вариант:

tr:nth-child(n + 2) {
    /* properties */
}

Answer 7

Извините, я знаю, что это старый, но почему бы не стилизовать все элементы tr так, как вы хотите, все, кроме первого и использовать класс psuedo: first-child, где вы отменяете то, что вы указали для всех элементов tr.

Лучше описать этим примером:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik

Answer 8

Вы также можете использовать псевдо-класс селектора в вашем CSS следующим образом:

.desc:not(:first-child) {
    display: none;
}

Это не будет применять класс к первому элементу с классом .desc.

ВотJSFiddle с примером: http://jsfiddle.net/YYTFT/,, и это хороший источник для объяснения селекторов псевдоклассов: http://css -tricks.com / pseudo-class-selectors /

Answer 9

Поскольку tr:not(:first-child) не поддерживается IE 6, 7, 8. Вы можете воспользоваться помощью jQuery. Вы можете найти это здесь

Answer 10

Вы можете создать класс и использовать этот класс, когда определяете все свои будущие, которые вы хотите (или не хотите) выбирать с помощью CSS.

Это можно сделать, написав

<tr class="unselected">

, а затем в вашем css есть строки (и в качестве примера используется команда выравнивания текста):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}