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

У меня есть 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 селекторы уровень 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, соседний селектор поддерживает один из вариантов IE7 +.

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

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

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

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

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

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

div li~li {
    color: red;
}

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

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

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

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

Вы можете использовать любой селектор с 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)){}

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

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

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

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

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

ul:not(:first-child)

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

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

Вы также можете использовать :notбез родительского селектора.

   :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*/
}

Как я использовал 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;
    }

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