Как я могу использовать селектор 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: "каждый элемент, кроме первого"?
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, который вы устанавливаете.
это решение CSS2 ("any ul
после очередного ul
") тоже работает, и поддерживается большим количеством браузеров.
div ul + ul {
background-color: #900;
}
в отличие от :not
и :nth-sibling
, the селектор соседнего брата поддерживается IE7+.
если у вас JavaScript изменяет эти свойства после загрузки страницы, вы должны посмотреть на некоторые известные ошибки в IE7 и IE8 реализации этого. посмотреть этот ссылка.
для любой статической веб-страницы, это должно прекрасно работать.
С :not
не принимаются IE6~8, Я бы предложил вам следующее:
div ul:nth-child(n+2) {
background-color: #900;
}
так что вы выбираете каждый ul
в родительском элементе кроме первого.
обратитесь к Крису Койеру "полезно: nth-детские рецепты" статью nth-child
примеры.
not(:first-child)
больше не работает. По крайней мере в последних версиях Chrome и Firefox.
вместо этого попробуйте следующее:
ul:not(:first-of-type) {}
мне не повезло с некоторыми из вышеперечисленных,
Это был единственный, который действительно работал для меня
ul:not(:first-of-type) {}
это сработало для меня, когда я пытался, чтобы первая кнопка, отображаемая на странице, не была произведена с помощью опции margin-left.
это был вариант, который я попробовал сначала, но он не работал
ul:not(:first-child)