Zaznacz wszystkie elementy potomne rekurencyjnie w CSS


407

Jak wybrać rekurencyjnie wszystkie elementy potomne?

div.dropdown, div.dropdown > * {
    color: red;
}

Ta klasa rzuca klasę tylko na zdefiniowaną nazwę klasy i wszystkie bezpośrednie dzieci. Jak w prosty sposób wybrać wszystkie childNodes w ten sposób:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

Odpowiedzi:


621

Użyj białej spacji, aby dopasować wszystkich potomków elementu:

div.dropdown * {
    color: red;
}

x ypasuje do każdego elementu y znajdującego się wewnątrz x , niezależnie od tego, jak głęboko jest ono zagnieżdżone - dzieci, wnuki i tak dalej.

Gwiazdka *pasuje do dowolnego elementu.

Oficjalna specyfikacja: CSS 2.1: Rozdział 5.5: Selektory potomne


działa, ale teraz zastępuje wszystkie inne klasy, nawet jeśli mają wyższy priorytet .. (są one umieszczane później w pliku css)
clarkk

Selektor odgrywa również rolę w tym, jaki priorytet mają właściwości, a nie tylko w tym, gdzie pojawiają się w pliku. Możesz spróbować dodać „! Ważne” do swoich wartości, np.color: red !important;
anroesti

Wiem, to trochę brzydkie. Zamiast tego możesz spróbować napisać bardziej precyzyjne selektory, są szanse, że to też zadziała. (np. #head ul#head ul#navi)
anroesti

2
Ok, bardzo prosty przykład: p.xyjest ważniejszy niż p, ponieważ jest bardziej szczegółowy. jsfiddle.net/ftJVX
anroesti

1
co jeśli chcę wszystkie dzieci, które miały określoną klasę?
MEM

144

Reguła jest następująca:

A B 

B jako potomek A.

A > B 

B jako dziecko A

Więc

div.dropdown *

i nie

div.dropdown > *
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.