Wählen Sie alle untergeordneten Elemente rekursiv in CSS aus

Die häufig verwendete Methode zur Auswahl der HTML -Elemente in CSS besteht darin, die ID oder den Klassenauswahl des jeweiligen Elements hinzuzufügen und dann die CSS -Eigenschaften im Element anzuwenden. Wenn jedoch verschiedene Arten von untergeordneten Elementen ausgewählt werden müssen, die einem einzigen übergeordneten Element zugeordnet sind. Zum Beispiel ein Spannelement, ein Absatzelement oder ein Überschriftenelement als Kind eines einzelnen Divelelements, das “*Das Symbol, gefolgt vom Selektor, wird im CSS -Stilelement verwendet.

Dieser Artikel zeigt die Methode, um alle untergeordneten Elemente praktisch auszuwählen.

So wählen Sie alle untergeordneten Elemente rekursiv aus?

Um die untergeordneten Elemente auszuwählen, muss der Entwickler den ID oder die Klassenauswahl des übergeordneten Elements mit der “hinzufügen*Symbol am Ende im CSS -Stilelement und fügen Sie dann die Eigenschaften darin hinzu.

Beispiel

Fügen wir ein einfaches Beispiel hinzu, um die obige Erklärung zu verstehen:

Absatz Nr. 1

> Absatz Nr. 2

Absatz Nr. 3

> Absatz # 4

Im oben hinzugefügten Code -Snippet:

• • A ""Element wird mit einer Klasse hinzugefügt, die als" als "deklariert" hinzugefügt wird "meine Klasse”.
  • Im Inneren ""Element, vier Unterelemente werden mit Verwendung definiert"

    ","","

    ", Und ""Tags mit dem Text"Absatz Nr. 1","Absatz 2","Absatz Nr. 3", Und "Absatz Nr. 4", bzw.

  • Nach der Schließung “"Tag, drei""Elemente werden hinzugefügt, die nicht mit dem obigen verbunden sind"" Element. Sie werden nur hinzugefügt, um diejenigen zu unterscheiden, die die untergeordneten Elemente der Eltern sind, und diejenigen, die unabhängige Elemente sind.

Nun, um alle untergeordneten Elemente der Div auszuwählen, die “*Das Symbol mit dem Namen der übergeordneten ID oder Klasse kann verwendet werden:

.meine Klasse *
Hintergrundfarbe: Powderblue;
Bildschirmsperre;
Text-Align: Mitte;

Im obigen Code -Snippet:

• • Der "*Symbol wird hinzugefügt, gefolgt von der “.meine Klasse”Selektor, das das übergeordnete Element ist, das vier verschiedene Elemente darin als untergeordnete Elemente enthält.
  • DrinnenHintergrundfarbe"Eigentum wurde als" definiert als "Powderblue”. Diese Eigenschaft fügt den Kinderelementen die Hintergrundfarbe hinzu.
  • “Bildschirmsperre" Und "Text-Align: MitteEigenschaften wurden definiert, um die untergeordneten Elemente an der Zentrum der Schnittstelle auszurichten.

Das oben genannte Beispiel wendet die CSS-Eigenschaften auf die untergeordneten Elemente des mit der Klasse verbundenen übergeordneten Elements anmeine Klasse”. Diese Eigenschaften werden nicht auf andere Elemente angewendet, die nicht die untergeordneten Elemente des DIV sind, die mit der „Myclass“ -Klasse verbunden sind:

Es geht darum, alle untergeordneten Elemente in CSS rekursiv auszuwählen.

Abschluss

Um alle untergeordneten Elemente eines bestimmten übergeordneten Elements auszuwählen, müssen Sie das hinzufügen*Symbol nach der ID oder Klassenauswahl des übergeordneten Elements im CSS -Stilelement. Die im Inneren hinzugefügten CSS -Eigenschaften werden dann auf allen untergeordneten Elementen implementiert. Dieser Artikel lieferte eine vollständige Anleitung zur Methode, um alle untergeordneten Elemente in CSS auszuwählen.