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