CSS gelten für alle Kinder

Wir können alle Kinder eines bestimmten Elternteils auswählen und dann das Styling auf alle Kinder in CSS anwenden. Wir haben einen Kinderwählers in CSS, um sich auszuwählen und Stil auf alle Kinder anzuwenden. Der untergeordnete Selektor ist auch als "Element> Element" -Auskündigung bekannt. Jedes Element, das in der übergeordneten Klasse vorhanden ist, wird als Kind dieses Elternteils ausgewählt. Wir können den Stil aller Kinder mit den CSS -Eigenschaften ändern.

In diesem Leitfaden lernen wir, wie Sie alle Kinder in CSS Stil anwenden und einige Beispiele verwenden, um dieses Konzept im Detail zu verstehen.

Syntax:

Element> Element

Es wird alle Kinder des jeweiligen Elternteils auswählen.

div. Klasse> *
// Eigenschaften von CSS

Es wird die Kinder rekursiv auswählen.

Beispiel Nr. 1: Alle Kinder auswählen

Zunächst erstellen wir die HTML -Datei. Dann erstellen wir einige Klassen "Div" und "Span" und schreiben einige Absätze in diesen Klassen. Wir verwenden den Kinderauswahl in CSS und fügen einen Stil hinzu, damit er diesen Stil ausgewählt und auf alle Kinder anwendet. In diesem Handbuch verwenden wir den Visual Studio -Code für die Demonstration dieser Beispiele. Wir erstellen diese HTML -Datei in dieser Software und geben den HTML -Code ein. Sie müssen den folgenden Code eingeben. Der ".Die Dateierweiterung von HTML ”wird verwendet, um diese Datei zu speichern.

Hier haben wir ein "" Tag. In diesem „“ -Tag haben wir zwei Absätze mit dem “

”. Dann kommt ein "" Tag. Wir haben einen Absatz in diesem Tag. Nach dem Schlussetik. Außerhalb dieses "Div" -Tags schreiben wir noch einen Absatz. Diese Absätze helfen Ihnen dabei, das Konzept der Auswahl und Anwendung aller Elemente in CSS zu verstehen.

CSS -Code:

Der CSS -Code spiegelt sich im folgenden Bild wider. Wir haben diese CSS -Datei mit unserer HTML -Datei verknüpft. Das gesamte Styling, das wir hier gemacht haben, wird auf die von uns erstellte HTML -Datei angewendet.

Hier verwenden wir das „Div> p“, das alle Absätze auswählt, die im „Div“ vorhanden sind. In den lockigen Klammern verwenden wir die Stileigenschaften wie „Hintergrundfarbe“, mit denen die Hintergrundfarbe aller Kinder dieses übergeordneten „Div“ -Divs geändert werden, um zu ändern. Wir setzen es als "hellblau". Dieser hellblaue Hintergrund gilt für alle Kinder. Wir verändern die „Schriftfamilie“ aller Kinder, indem wir das CSS -Eigentum verwenden und sie auf „algerisch“ setzen. Diese Eigenschaft gilt für alle Kinder. Außerdem verwenden wir das CSS-Eigentum „Text-Align“ und übereinstimmen den Text der Kinder auf das „Zentrum“.

Ausgang:

Sie können die Ausgabe problemlos erhalten, indem Sie "Alt+B" drücken. Es macht Ihre Ausgabe auf dem Browser. Sie können leicht den Unterschied erkennen, wie es alle Kinder auswählt und das Styling auf diese Kinder anwendet.

Hier sehen wir, dass es die ersten beiden Absätze sowie die vierten und fünften Absätze auswählt und den Stil auf diese Absätze anwendet. Es ändert den Stil des dritten und sechsten Absatzes nicht, da sie nicht die Kinder des Elternteils „Div“ sind. Der dritte Absatz ist in der "Spannweite" geschrieben, deshalb ist es nicht das Kind von "Div". Der sechste Absatz ist außerhalb des „DIV“ geschrieben, sodass das Styling nicht auf diesen Absatz angewendet wird. Der untergeordnete Selektor wählt nur das Kind des Elternteils aus, das im CSS -Code erwähnt wird.

Beispiel Nr. 2: Alle Kinder rekursiv auswählen

Wenn der HTML -Code dem vorherigen Code der gleiche ist, setzen wir den Namen der Div -Klasse als „Allchild“ und verwenden diesen Namen im CSS -Code. Wir ändern den CSS -Code und wählen das Kind des Elternteils rekursiv aus.

In diesem Beispiel ändern wir die „Hintergrund“ der Kinder der Kinder des Div -Klasse -Elements. Hier das „Div.Allchilld> *”wählt alle Div -Klasse -Elemente als Kind dieses„ Divs “aus. Das "*" wählt alle Kinder der "Div" -Klasse "Allchild" aus. Es verändert die Farbe aller Kinder in der Div -Klasse in „Pink“

Ausgang:

Hier ist die Ausgabe, in der wir die „Div.Allchild> *”Selektor. Es wählt alle Kinder des Elternteils rekursiv aus. Sie können sehen, dass es die Hintergrundfarbe aller Elemente der Div -Klasse in eine „rosa“ Farbe ändert.

Beispiel 3: Auswählen aller Kinder in CSS

In diesem Code verwenden wir das "" und . In der "" haben wir drei "und den Absatz"

In diesem Absatz. Wir verwenden das "" wieder und schließen diesen Absatz dann mit "mit" "

”. Wir schließen das „Div“ und schaffen eine weitere Zeitspanne, die außerhalb des „Div“ vorhanden ist.

CSS -Code:

Die "Anzeige" der "Spannweite" ist auf "Block" eingestellt. Wir verwenden den untergeordneten Selektor, der alle Kinder des Elternteils auswählt. Es wird hier verwendet, um alle Bereiche der Div -Klasse auszuwählen, da „Span“ das Kind des übergeordneten „Div“ ist. Es wählt alle Spannelemente des DIV aus und wendet dann das Styling auf alle Spannweiten an. Die Hintergrundfarbe aller Spans ist auf "hellgrün" eingestellt. Die "Schriftgröße" aller "Spans" ist auf "35px" eingestellt. Die "Schriftfamilie" für all dies ist "Gill Sans". Das "Schriftgewicht" ist auf "fett" und der "Stil" ist auf "kursiv" eingestellt. Dies gilt für alle Kinder.

Ausgang:

Es wendet den Stil auf alle Kinder „Spannweite“ des Elternteils "Div" an. Als Absatz 1, 2 und 4 sind im „Div“ in der „Spannweite“ geschrieben, der Stil dieser drei Absätze ändert sich. Dies bedeutet, dass der Kinderwähler die Spannweite des DIV auswählt und das vorherige Styling auf all diese Kinder anwendet.

Beispiel 4: Alle Kinder rekursiv auswählen

Wir erstellen die "Div -Klasse" mit dem Namen "Kind". Wir haben zwei Spannweiten und dann einen Absatz und noch einmal eine Zeitspanne im Div. Ein Absatz ist außerhalb des Divs geschrieben. Jetzt wählen wir die Elemente der Div -Klasse rekursiv mit dem CSS -Selektor aus.

CSS -Code:

Die Spannweite "Anzeige" ist "Block". Dann haben wir das „Div.Child> *”-Sähler, der alle Elemente der Div -Klasse mit dem Namen„ Kind “mit dem„ *“auswählt. Das "*" wählt alle Kinderelemente aus. Die „Hintergrundfarbe“ hier für alle Kinder ist „leichter Lachs“. Die Schriftfarbe ist "Blau-Violett". Die Familie der Schrift, die wir hier verwenden, ist "Times New Roman". Wir verwenden auch das "Schriftgewicht" und setzen es auf "mutiger". Die "Schriftgröße", die wir verwenden, ist "25px". Überprüfen Sie nun, wie die Ausgabe aussieht.

Die ersten vier Absätze sind in der Div -Klasse „Kind“ geschrieben, und das gesamte Styling, das wir im vorherigen Beispiel des CSS -Code verwendet haben, wird hier angewendet, wie im Bild gezeigt. Es wählt alle Kinderelemente der „Kinder“ -Klasse von „Div“ aus und wendet die Stile auf diese Elemente an.

Abschluss

Wir haben den Kinderwählers in diesem Leitfaden verwendet und erklärt, wie alle Kinder in CSS ausgewählt werden können. Wir haben auch erklärt, wie man die Stile auf alle Kinder des ausgewählten Elternteils anwendet. Wir haben gelernt, wie man alle Kinder eines ausgewählten Elternteils auswählt und alle Kinder mit dem CSS Child Selector rekursiv ausgewählt hat. In diesem Leitfaden haben wir vier verschiedene Beispiele untersucht. Wir haben alle Beispiele durchgeführt und diese Codes und Ausgänge in diesem Handbuch angezeigt. Wir erwarten, dass Sie dieses Konzept lernen, nachdem Sie diesen Leitfaden sorgfältig gelesen und diese Beispiele selbst durchgeführt haben.