У меня есть тег 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: "каждый элемент, кроме первого"?
Одна из выложенных вами версий [действительно работает][1] для всех современных браузеров (где CSS-селекторы уровня 3 поддерживаются]3):
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 ("любой ul
после другого ul
") тоже работает и поддерживается большим количеством браузеров.
div ul + ul {
background-color: #900;
}
В отличие от :not
и :nth-sibling
, селектор adjacent sibling selector поддерживается IE7+.
Если у вас JavaScript изменяет эти свойства после загрузки страницы, вам следует обратить внимание на некоторые известные ошибки в IE7 и IE8 реализации этого. См. эту ссылку.
Для любой статической веб-страницы это должно работать идеально.
Поскольку :not
не принимается IE6-8, я бы предложил вам следующее:
div ul:nth-child(n+2) {
background-color: #900;
}
Таким образом, вы выбираете каждый ul
в его родительском элементе за исключением первого.
Обратитесь к статье Криса Койера (Chris Coyer's "Полезные рецепты :nth-child" для получения дополнительных примеров nth-child
примеров.
не(:сначала-ребенок), как представляется, не работать. По крайней мере в последних версиях Chrome и Firefox.
Вместо этого, попробуйте следующее:
ul:not(:first-of-type) {}
Вы можете использовать любой селектор с "не"
p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
Я не'т иметь удачу с некоторыми из вышеперечисленных,
Это было единственным, что на самом деле работал для меня
уль:не(:во-первых-из-тип) {}
Это работало для меня, когда я пытаюсь его первая кнопка отображается на странице не производится маржа-левый вариант.
этот вариант я попробовал первым, но это вовсе't работа
уль:не(:сначала-ребенок)
Вы можете использовать селектор с :не
как ниже вы можете использовать любой селектор внутри :нет()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
вы можете использовать
:не
без родительского селектора, а также.
:not(:nth-child(2)){
/*YOUR STYLE*/
}
Больше примеров
any_CSS_selector:not(:first-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
/*YOUR STYLE*/
}
Как я использовал `уль:не(:сначала-ребенок) - это идеальное решение.
div ul:not(:first-child) {
background-color: #900;
}
Почему это прекрасно, потому что с помощью `уль:не(:сначала-ребенок), мы можем применить CSS на внутренние элементы. Нравится ли Гуи, продолжительность, теги и т. д.
Но при использовании других решений:
div ul + ul {
background-color: #900;
}
и
div li~li {
color: red;
}
и
ul:not(:first-of-type) {}
и
div ul:nth-child(n+2) {
background-color: #900;
}
Эти ограничения лишь на уровне ул УСБ. Предположим, что мы не можем применить CSS на литий
, как `див ул + ул ли'.
Для внутренних элементов уровня первое решение отлично работает.
div ul:not(:first-child) li{
background-color: #900;
}
и так далее ...