it-swarm.com.ru

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

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

647
OTAR

Одна из опубликованных вами версий на самом деле работает для всех современных браузеров (где CSS-селекторы уровня 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.

1135
Jon

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

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

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

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

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

137
Alex Quinn

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

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

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

Обратитесь к Крису Койеру «Полезно: Рецепты nth-child» статья для более nth-childпримеры

65
ed1nh0
div li~li {
    color: red;
}

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

15
zloctb

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

Вместо этого попробуйте это: 

ul:not(:first-of-type) {}
5
Vinny Troia

Вы можете использовать любой селектор с not

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)){}
3
user11246010

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

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

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

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

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

ul:not(:first-child)

3
newtron54

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

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

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

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

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 уровня ul. Предположим, что мы не можем применить CSS к li как `div ul + ul li '.

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

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

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

0
Gufran Hasan

Вы можете использовать свой селектор с :not, как показано ниже, вы можете использовать любой селектор внутри :not()

any_CSS_selector:not(any_other_CSS_selector){
    /*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*/
}
0
Nasser