Выберите все элементы' 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/

218
css css-selectors html html-table

10 ответов

путем добавления класса к первому tr и в последующем trs. Там нет кроссбраузер способ выбора строк, которые вы хотите с CSS в одиночку.

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

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

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

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

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

tr:not(:first-child)
218

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

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

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

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

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

10

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

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

лучше описано в этом примере:

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

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

/ Patrik

1

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

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

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

0

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

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

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

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

-1

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

это будет сделано путем написания 

<tr class="unselected">

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

unselected {
  text-align:center;
}



selected {
  text-align:right;
}
-3