Как выбрать все элементы tr
, кроме первого tr
в таблице с помощью CSS?
Я пытался использовать этот метод, но обнаружил, что он не работает.
Как выбрать все элементы tr
, кроме первого tr
в таблице с помощью CSS?
Я пытался использовать этот метод, но обнаружил, что он не работает.
Добавив класс к первому tr
или последующему tr
s. Нет способа скрещивания выбора строк, которые вы хотите использовать только с помощью CSS.
Однако, если вы не заботитесь об Internet Explorer 6, 7 или 8:
tr:not(:first-child) {
color: red;
}
Я удивлен, что никто не упомянул о использовании компиляторов sibling, которые поддерживаются IE7 и более поздними версиями:
tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */
Оба они функционируют точно так же (в контексте HTML-таблиц):
tr:not(:first-child)
идеальное решение, но не поддерживаемое в IE
tr:not(:first-child) {css}
вторым решением было бы стилизовать все tr, а затем переопределить css для first-child:
tr {css}
tr:first-child {override css above}
звучит как "первая строка", о которой вы говорите, это ваш заголовок таблицы, поэтому вам действительно нужно подумать об использовании thead
и tbody
в вашей разметке (click здесь), что приведет к "лучшей" разметке (семантически корректной, полезной для таких вещей, как прошивки) и более простой, кросс-браузерной возможности для выбора css (table thead ... { ... }
)
Хотя вопрос уже имеет достойный ответ, я просто хочу подчеркнуть, что тег :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
на входную часть селектора.
Извините, я знаю, что это старо, но почему бы не стилизовать все три элемента так, как вы хотите, кроме первого, и использовать класс psuedo: first-child, в котором вы отменяете то, что вы указали для всех tr элементов.
Лучше описать этот пример:
tr {
border-top: 1px solid;
}
tr:first-child {
border-top: none;
}
/Patrik
Другая опция:
tr:nth-child(n + 2) {
/* properties */
}
Так как tr:not(:first-child)
не поддерживается IE 6, 7, 8. Вы можете использовать справку jQuery.
Вы можете найти здесь
Вы также можете использовать селектор псевдо-класса в своем CSS:
.desc:not(:first-child) {
display: none;
}
Это не применит класс к первому элементу с классом .desc.
Здесь JSFiddle с примером: http://jsfiddle.net/YYTFT/, и это хороший источник для объяснения селекторов псевдосектора: http://css-tricks.com/pseudo-class-selectors/
Вы можете создать класс и использовать класс, когда вы определяете все свое будущее, которое вы хотите (или не хотите), чтобы выбрать CSS.
Это можно сделать, написав
<tr class="unselected">
а затем в вашем css, имеющем строки (и используя команду text-align в качестве примера):
unselected {
text-align:center;
}
selected {
text-align:right;
}