Wählen Sie alle untergeordneten Elemente rekursiv in CSS aus

407

Wie können Sie alle untergeordneten Elemente rekursiv auswählen?

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

Diese Klasse wirft nur eine Klasse auf den definierten Klassennamen und alle unmittelbaren untergeordneten Elemente. Wie können Sie auf einfache Weise alle childNodes wie folgt auswählen:

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

css css-selectors Clarkk
quelle

Antworten:

621

Verwenden Sie ein Leerzeichen , um alle Nachkommen eines Elements abzugleichen:

div.dropdown * {
    color: red;
}

x ystimmt mit jedem Element y überein , das sich in x befindet , wie tief es auch verschachtelt sein mag - Kinder, Enkelkinder und so weiter.

Das Sternchen * entspricht einem beliebigen Element.

Offizielle Spezifikation: CSS 2.1: Kapitel 5.5: Nachkommenselektoren

anroesti
quelle

es funktioniert, aber jetzt überschreibt es alle anderen Klassen, auch wenn sie eine höhere Priorität haben .. (sie werden später in der CSS-Datei platziert)

Clarkk

Der Selektor spielt auch eine Rolle bei der Priorität der Eigenschaften, nicht nur dort, wo sie in der Datei angezeigt werden. Sie könnten versuchen, Ihren Werten "! Wichtig" hinzuzufügen, z. B.color: red !important;

anroesti

Ich weiß, es ist ein bisschen hässlich. Sie könnten stattdessen versuchen, präzisere Selektoren zu schreiben. Dies würde wahrscheinlich auch funktionieren. (zB #head ul→ #head ul#navi)

Anroesti

Okay, sehr einfaches Beispiel: p.xyist wichtiger als p, weil es etwas spezifischer ist. jsfiddle.net/ftJVX

anroesti

Was ist, wenn ich möchte, dass alle Kinder eine bestimmte Klasse haben?

MEM

144

Die Regel lautet wie folgt:

A B

B als Nachkomme von A.

A > B

B als Kind von A.

Damit

div.dropdown *

und nicht

div.dropdown > *

Abdennour TOUMI
quelle