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;
}

css css-selectors

— clarkk
źródło

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

— anroesti
źródło

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

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

— anroesti

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

— Abdennour TOUMI
źródło