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

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

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

Добавляя класс к первому trили последующему trs. Не существует кросс-браузерного способа выбора нужных вам строк только с помощью 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 для first-child:

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

звучит как «первая строка», о которой вы говорите, это заголовок таблицы - так что вы действительно должны подумать об использовании theadи tbodyв вашей разметке ( нажмите здесь ), что приведет к «лучшей» разметке (семантически правильно, полезно для таких вещей, как программы чтения с экрана) ) и более простые, кросс-браузерные возможности для css-selection ( 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;
}

то есть, поскольку inputs являются дочерними, вы должны поместить их first-childв область ввода селектора.

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

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

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

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

/ Patrik

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

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

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

Может быть, кто-то может извлечь выгоду, ниже, что я использовал

ol li:not(:first-child) {
    background: black;
    color: white;
}

Вы также можете использовать псевдо-класс селектора в вашем 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;
}