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

Question

Как выбрать все элементы 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/

Answer 1

Путем добавления класса или первого tr или последующих tr с. Существует не crossbrowser способ выбора строк, которые вы хотите с помощью CSS.

Однако, если вы не заботитесь о Internet Explorer 6, 7 или 8:

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

Answer 2

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

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

вторым решением было бы стилизовать все ТР а затем переопределить css для первого ребенка:

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

Answer 3

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

Это будет сделано в письменной форме

<tr class="unselected"> 

, а затем в вашем CSS, имеющих строки (и с помощью выравнивания текста команды в качестве примера):

unselected { 
    text-align:center; 
} 



selected { 
    text-align:right; 
} 

Answer 4

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

Answer 5

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

Answer 6

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

Лучше descriped на этом примере:

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

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

/Patrik

Answer 7

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

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

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

tr:not(:first-child) 

Answer 8

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

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

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

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

Answer 9

Хотя вопрос имеет достойный ответ уже, я просто хочу подчеркнуть, что :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 10

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

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