Jak mogę użyć selektora not: first-child?

Mam tag div zawierający kilka tagów ul.

Jeśli próbuję ustawić właściwości CSS tylko dla pierwszego znacznika ul, a ten kod działa: 

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

Kiedy chcę ustawić właściwości CSS dla każdego znacznika ul z wyjątkiem pierwszego, próbowałem tego: 

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

Również to: 

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

I to: 

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

Ale bez skutku. Jak napisać w CSS: "każdy element, z wyjątkiem pierwszego"?

Author: TylerH, 2012-09-06
Source

6 answers

Jedna z opublikowanych wersji faktycznie działa dla wszystkich nowoczesnych przeglądarek (gdzie selektory CSS level 3 są obsługiwane przez ):

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

Jeśli potrzebujesz obsługiwać starsze przeglądarki lub jeśli ograniczeniem selektora :not jest ograniczenie (przyjmuje tylko prosty selektor jako argument), możesz użyć innej techniki:

Zdefiniuj regułę, która ma większy zakres niż zamierzony, a następnie" odwołaj " ją warunkowo, ograniczając jej zakres tego, co zamierzasz zrobić: 

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

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

Podczas ograniczania zakresu użyj domyślnej wartości dla każdego ustawianego atrybutu CSS.

 1038
Author: Jon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-24 13:53:17

To rozwiązanie CSS2 ("any ul after another ul") również działa i jest obsługiwane przez więcej przeglądarek.

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

W przeciwieństwie do :not i :nth-sibling, sąsiadujący selektor rodzeństwa jest obsługiwany przez IE7+.

Jeśli masz JavaScript zmienia te właściwości po załadowaniu strony, powinieneś przyjrzeć się kilku znanym błędom w IE7 i IE8 implementacji tego. zobacz ten link .

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

 131
Author: Alex Quinn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 07:54:44

Cóż, ponieważ :not nie jest akceptowane przez IE6~8 , proponuję ci to: 

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

Więc wybieramy każdy ul w jego elemencie nadrzędnym z wyjątkiem pierwszego.

# Patrz Chris Coyer "przydatne: nth-przepisy dla dzieci" artykuł więcej nth-child przykłady .
 59
Author: ed1nh0,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-26 12:41:34 
div li~li {
    color: red;
}

Obsługuje IE7

 14
Author: zloctb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-16 11:10:18

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

Zamiast tego spróbuj tego: 

ul:not(:first-of-type) {}
 3
Author: Vinny Troia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-19 16:36:14

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

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

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

To działało dla mnie, gdy starałem się, aby pierwszy przycisk wyświetlany na stronie nie był wykonywany przez opcję margin-left.

To była opcja, którą próbowałem najpierw, ale nie zadziałała

ul:not(:first-child)

 1
Author: newtron54,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 13:13:25