не: выбор первого ребенка

606

У меня есть тег 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: "каждый элемент, кроме первого"?

Теги:
css-selectors

7 ответов

1105
Лучший ответ

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

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

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

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

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

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

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

Поделиться
  • 0
    Вы точно знаете, на каких версиях это не поддерживается?
  • 9
    @Simon_Weaver: На практике все, кроме IE <9, поддерживают это. Большой ресурс для получения такой информации - caniuse.com .
Показать ещё 1 комментарий
135

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

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

В отличие от :not и :nth-sibling, смежный селектор поддерживает IE7 +.

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

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

Поделиться
  • 0
    Селектор «+» не работает в IE7.
  • 4
    @Leven: в этой ссылке указано, что она должна работать в IE7, но только статически. Если ваш JS размещает другой элемент перед ним, он может быть обновлен неправильно. Это проблема, которую вы видели?
Показать ещё 1 комментарий
67

Так :not не принимается IE6-8, я хотел бы предложить вам следующее:

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

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

Обратитесь к статье Криса Койера "Полезное: рецепты nth-child", чтобы найти больше примеров для nth-child.

Поделиться
15 
div li~li {
    color: red;
}

Поддержка IE7

Поделиться
4

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

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

ul:not(:first-of-type) {}
Поделиться
  • 1
    Они оба работают, но имеют разное значение. ul:not(:first-child) буквально означает «любой элемент ul который не является первым дочерним элементом его родителя», поэтому он не будет соответствовать даже 1-му ul если ему предшествует другой элемент ( p , заголовок и т. д.). Напротив, ul:not(:first-of-type) означает «любой элемент ul кроме 1-го ul в контейнере». Вы правы, что ОП, вероятно, нуждалось в последнем поведении, но ваше объяснение вводит в заблуждение.
2

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

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

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

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

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

ul:not(:first-child)

Поделиться
0

Поскольку я использовал ul:not(:first-child), это идеальное решение.

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

Почему это идеально, потому что, используя ul:not(:first-child), мы можем применить CSS к внутренним элементам. Как теги li, img и т.д.

Но когда используются другие решения:

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

Это ограничивает только UL уровня CSS. Предположим, мы не можем применить css к li как "div ul + ul li".

Для этого первое решение отлично работает.

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

и так далее...

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню