not: selektor pierwszego dziecka

Mam divtag zawierający kilka ultagów.

Jestem w stanie ustawić właściwości CSS tylko dla pierwszego ultagu:

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

Jednak moje poniższe próby ustawienia właściwości CSS dla każdego ultagu, z wyjątkiem pierwszego, nie działają:

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

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

div ul:first-child:after {
    background-color: #900;
}

Jak napisać w CSS: „każdy element oprócz pierwszego”?

Jedna z opublikowanych wersji działa właściwie dla wszystkich nowoczesnych przeglądarek (w których obsługiwane są selektory CSS poziom 3 ):

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

Jeśli potrzebujesz obsługi starszych przeglądarek lub przeszkadzają ci ograniczenia:not selektora (przyjmuje tylko zwykły selektor jako argument), możesz użyć innej techniki:

Zdefiniuj regułę, która ma większy zakres niż zamierzony, a następnie „unieważnij” ją warunkowo, ograniczając jej zakres do tego, co zamierzasz:

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

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

Ograniczając zakres, użyj wartości domyślnej dla każdego ustawianego atrybutu CSS.

To rozwiązanie CSS2 („dowolne ulpo drugim ul”) również działa i jest obsługiwane przez więcej przeglądarek.

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

W przeciwieństwie :noti :nth-siblingThe sąsiedztwie rodzeństwa selektor jest obsługiwany przez IE7 +.

Jeśli JavaScript zmienia te właściwości po załadowaniu strony, powinieneś zapoznać się z niektórymi znanymi błędami w implementacjach IE7 i IE8 tego. Zobacz ten link .

Dla każdej statycznej strony internetowej powinno to działać idealnie.

Ponieważ :notnie jest akceptowany przez IE6-8 , sugeruję ci to:

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

Więc wybierasz każdy ulelement macierzysty oprócz pierwszego .

Patrz Chris Coyer za „Przydatne: nth-child Przepisy” artykułu więcej nth-child przykładów .

div li~li {
    color: red;
}

Obsługuje IE7

not(:first-child)wydaje się już nie działać. Przynajmniej z nowszymi wersjami Chrome i Firefox.

Zamiast tego spróbuj tego:

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

Możesz użyć dowolnego selektora za pomocą 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)){}

Nie miałem szczęścia z niektórymi z powyższych,

To był jedyny, który faktycznie dla mnie działał

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

To działało dla mnie, gdy próbowałem, aby pierwszy przycisk wyświetlany na stronie nie miał wpływu na opcję marginesu po lewej stronie.

to była opcja, którą wypróbowałem najpierw, ale to nie zadziałało

ul:not(:first-child)

Możesz używać selektora z :notpodobnym poniżej, możesz użyć dowolnego selektora wewnątrz:not()

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

możesz używać również :notbez selektora rodzica.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Więcej przykładów

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

Jak użyłem ul:not(:first-child)jest idealnym rozwiązaniem.

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

Dlaczego jest to idealne, ponieważ za pomocą ul:not(:first-child)możemy zastosować CSS na elementach wewnętrznych. Jak li, img, span, atagi itp.

Ale kiedy używane są inne rozwiązania:

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

i

div li~li {
    color: red;
}

i

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

i

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

Ograniczają one tylko CSS na poziomie ul. Załóżmy, że nie możemy zastosować CSS lijako „div ul + ul li”.

W przypadku elementów poziomu wewnętrznego pierwsze rozwiązanie działa idealnie.

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

i tak dalej ...