it-swarm.com.ru

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

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

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

http://www.daniel-lemire.com/blog/archives/2008/08/22/how-to-select-even-or-odd-rows-in-a-table-using-css- 3 /

236
Steven Spielberg

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

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

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

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

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

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

tr:not(:first-child)
221
BoltClock

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

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

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

tr {css}
tr:first-child {override css above}
26
Mark Steggles

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

10
oezi

Хотя на этот вопрос уже есть достойный ответ, я просто хочу подчеркнуть, что тег :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;
}

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

2
CodyBugstein

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

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

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

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

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

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

/ Patrik

1
Patrik

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

0
Tapos