2012-09-05 24 views
513

Mam tag div zawierający kilka tagów .Jak mogę użyć selektora "nie"?

Jeśli staram ustawić właściwości CSS tylko dla pierwszego ul tagu, a ten kod działa:

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

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

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

również to:

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

i tak:

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

Ale bez skutku. Jak napisać w CSS: "każdy element, oprócz pierwszego"?

+6

li: not (: first-child) – zloctb

Odpowiedz

886

Jedna z wersji, opublikowanego actually works dla wszystkich nowoczesnych przeglądarek (gdzie CSS selectors level 3supported):

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

Jeśli potrzebujesz wsparcia starszych przeglądarek, lub jeśli są utrudnione przez :not selektora limitation (tylko to akceptuje simple selector jako argument), możesz użyć innej techniki:

Zdefiniuj regułę, która ma większy zasięg niż zamierzałeś, a następnie "odwołaj" 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 */ 
} 

Kiedy ograniczenie zakresu korzystania z default value dla każdego atrybutu CSS, które są ustawień.

+0

@OTARIKI: Właściwie ': not (: first-child)' działa - proszę zapoznać się z aktualizacją. – Jon

+1

Ups, z jakiegoś powodu to nie działało w moim chrome, (najpierw testuję ten kod tylko w chrome), teraz testuję to w innych przeglądarkach i działaniu kodu. problem rozwiązany, dziękuję :) – RIKI

+0

Czy wiesz dokładnie, na których wersjach nie jest to obsługiwane? –

51

Dobrze, ponieważ :not nie jest akceptowana przez IE6 ~ 8, chciałbym zasugerować to:

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

Więc odebrać każdy ul w jego elementu nadrzędnego wyjątkiem pierwszego.

Patrz Chris Coyer za "Useful :nth-child Recipes" artykułu więcej nth-childexamples.

+7

Powinno być (n + 2), aby uzyskać drugi element i dalej AKA pomiń pierwszy element: – stuyam

+1

@Jamartino ma rację, powinno być n + 2, dobrze byłoby, gdyby edytowano tę odpowiedź. –

+2

@ ed1nk0 Zmienilem twoją odpowiedź, by poprawić selektor, proszę cofnij, jeśli podważyłem twoje intencje tutaj :) W przeciwnym razie +1 - jest to najlepszy sposób na wybranie wszystkich oprócz pierwszego elementu. – jammypeach

126

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

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

przeciwieństwie :not i :nth-sibling The adjacent sibling selector jest obsługiwany przez IE7 +.

Jeśli masz JavaScript zmiany tych właściwości po załadowaniu strony, należy spojrzeć na kilka znanych błędów w IE7 i IE8 implementacji tego. See this link.

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

+0

Selektor "+" nie działa w IE7. – Leven

+3

@Leven: Ten [link quirksmode] (http://www.quirksmode.org/css/selectors/) mówi, że powinien działać w IE7, ale tylko statycznie. Jeśli twój JS umieści kolejny element przed nim, może nie zostać poprawnie zaktualizowany. Czy to był problem, który widziałeś? –

+0

może być warte odnotowania, że ​​w sekwencji elementów takich jak: 'ul ul div ul' (gdzie te elementy są rodzeństwem), wybrana zostanie tylko druga ulica, ponieważ ostatnia nie ma przedrostka' ul' przed sobą –

14
div li~li { 
    color: red; 
} 

Obsługuje IE7

0

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

Zamiast tego, spróbuj tego:

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

Oboje działają, ale mają inne znaczenie. 'ul: not (: first-child)' oznacza dosłownie "dowolny element" ul ", który nie jest pierwszym dzieckiem jego rodzica", więc nie będzie pasował nawet do pierwszego 'ul', jeśli jest poprzedzony innym elementem (' p ", nagłówek itp.). Wręcz przeciwnie, "ul: not (: first-of-type)" oznacza "dowolny element" ul "z wyjątkiem pierwszego' ul' w kontenerze ". Masz rację, że OP prawdopodobnie wymaga tego ostatniego zachowania, ale twoje wyjaśnienie jest raczej mylące. –

Powiązane problemy