Выберите все "tr", кроме первого

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

tr:not(:first-child)

Ответ 3

идеальное решение, но не поддерживаемое в IE

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

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

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

Ответ 4

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

Ответ 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 являются дочерними, вы должны поместить first-child на входную часть селектора.

Ответ 6

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

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

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

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

/Patrik

Ответ 7

Другая опция:

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

Ответ 8

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

Ответ 9

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

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

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

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

Ответ 10

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

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

<tr class="unselected">

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

unselected {
  text-align:center;
}



selected {
  text-align:right;
}