Mam div
tag zawierający kilka ul
tagów.
Jestem w stanie ustawić właściwości CSS tylko dla pierwszego ul
tagu:
div ul:first-child {
background-color: #900;
}
Jednak moje poniższe próby ustawienia właściwości CSS dla każdego ul
tagu, 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”?
źródło
To rozwiązanie CSS2 („dowolne
ul
po drugimul
”) również działa i jest obsługiwane przez więcej przeglądarek.W przeciwieństwie
:not
i:nth-sibling
The 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.
źródło
ul ul div ul
(gdzie te elementy są rodzeństwem), wybierane będą tylko drugie ul, ponieważ ostatnie nie maul
przed sobą samegoPonieważ
:not
nie jest akceptowany przez IE6-8 , sugeruję ci to:Więc wybierasz każdy
ul
element macierzysty oprócz pierwszego .Patrz Chris Coyer za „Przydatne: nth-child Przepisy” artykułu więcej
nth-child
przykładów .źródło
Obsługuje IE7
źródło
not(:first-child)
wydaje się już nie działać. Przynajmniej z nowszymi wersjami Chrome i Firefox.Zamiast tego spróbuj tego:
źródło
ul:not(:first-child)
oznacza dosłownie „każdyul
element, który nie jest pierwszym dzieckiem swojego rodzica”, więc nie będzie pasował nawet do pierwszego,ul
jeśli będzie poprzedzony innym elementem (p
nagłówkiem itp.). Przeciwnie,ul:not(:first-of-type)
oznacza „każdyul
element z wyjątkiem pierwszegoul
w pojemniku”. Masz rację, że OP prawdopodobnie potrzebował tego drugiego zachowania, ale twoje wyjaśnienie jest raczej mylące.Możesz użyć dowolnego selektora za pomocą
not
źródło
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)
źródło
Możesz używać selektora z
:not
podobnym poniżej, możesz użyć dowolnego selektora wewnątrz:not()
Więcej przykładów
źródło
Jak użyłem
ul:not(:first-child)
jest idealnym rozwiązaniem.Dlaczego jest to idealne, ponieważ za pomocą
ul:not(:first-child)
możemy zastosować CSS na elementach wewnętrznych. Jakli, img, span, a
tagi itp.Ale kiedy używane są inne rozwiązania:
i
i
i
Ograniczają one tylko CSS na poziomie ul. Załóżmy, że nie możemy zastosować CSS
li
jako „div ul + ul li”.W przypadku elementów poziomu wewnętrznego pierwsze rozwiązanie działa idealnie.
i tak dalej ...
źródło