Как я могу использовать селектор not:first-child?

Я div тег, содержащий несколько ul теги.

если я пытаюсь установить свойства CSS только для первого ul тег, и этот код работает:

div ul:first-child {
    background-color: #900;
}

когда я хочу установить свойства CSS для каждого ul тег кроме первого, я попробовал это:

div ul:not:first-child {
    background-color: #900;
}

кроме этого:

div ul:not(:first-child) {
    background-color: #900;
}

и так:

div ul:first-child:after {
    background-color: #900;
}

но безрезультатно. Как написать в CSS: "каждый элемент, кроме первого"?

606
css css-selectors html

6 ответов

одна из версий, которые вы опубликовали работает для всех современных браузеров (где CSS селекторы Уровень 3 are поддерживает):

div ul:not(:first-child) {
    background-color: #900;
}

Если вам нужно поддерживать устаревшие браузеры, или если вам мешает :not селектора ограничение (Она принимает только простой селектор в качестве аргумента), то вы можете использовать следующий метод:

определите правило, которое имеет больший объем, чем то, что вы намереваетесь а затем" отозвать " его условно, ограничив его объем тем, что вы намереваетесь:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

при ограничении области используйте значение по умолчанию для каждого атрибута CSS, который вы устанавливаете.

1038

это решение CSS2 ("any ul после очередного ul") тоже работает, и поддерживается большим количеством браузеров.

div ul + ul {
  background-color: #900;
}

в отличие от :not и :nth-sibling, the селектор соседнего брата поддерживается IE7+.

если у вас JavaScript изменяет эти свойства после загрузки страницы, вы должны посмотреть на некоторые известные ошибки в IE7 и IE8 реализации этого. посмотреть этот ссылка.

для любой статической веб-страницы, это должно прекрасно работать.

131

С :not не принимаются IE6~8, Я бы предложил вам следующее:

div ul:nth-child(n+2) {
    background-color: #900;
}

так что вы выбираете каждый ul в родительском элементе кроме первого.

обратитесь к Крису Койеру "полезно: nth-детские рецепты" статью nth-child примеры.

59
div li~li {
    color: red;
}

поддерживает IE7

14

not(:first-child) больше не работает. По крайней мере в последних версиях Chrome и Firefox.

вместо этого попробуйте следующее:

ul:not(:first-of-type) {}
3

мне не повезло с некоторыми из вышеперечисленных,

Это был единственный, который действительно работал для меня

ul:not(:first-of-type) {}

это сработало для меня, когда я пытался, чтобы первая кнопка, отображаемая на странице, не была произведена с помощью опции margin-left.

это был вариант, который я попробовал сначала, но он не работал

ul:not(:first-child)

1