Die Selektoren in CSS sind die Regeln, die das Elementmuster haben. Auf der Grundlage dieser Muster werden die Elemente vom Browser ausgewählt und in Stilen angepasst. In einigen Fällen ist es notwendig, die Elemente mit einem bestimmten übergeordneten Element zu stylen. Wenn beispielsweise mehrere „“ Elemente mit derselben Klasse zugeordnet sind und es erforderlich ist, das „Div“ mit der “zu stylen

" Schild. In solchen Fällen die “:hat()Die Pseudoklasse der Elternauswahl wird verwendet.

Dieser Beitrag wird beschreiben:

• Wie man ein übergeordnetes Element stymt, indem er seine Kinderelemente angibt?
• So wählen Sie alle untergeordneten Elemente aus?
• So wählen Sie alle direkten Kinderelemente aus?

Wie man ein übergeordnetes Element stymt, indem er seine Kinderelemente angibt?

Erstellen Sie zunächst eine HTML -Datei mit zwei "Div" -Anlementen wie folgt:

• Zwei hinzufügen “"Elemente mit derselben Klasse"Eltern-div”.
• Der erste enthält zwei “

  Elemente.

• Das zweite „“ Element enthält “

  " Und "

  ”:

Hallo

Welt

Hallo

Ich habe "H1" -Tag

Wenn es erforderlich ist, das „“ Element mit dem “zu stylen

Element, dann können wir das Styling des übergeordneten Elements anpassen, indem wir das Kind halten. Zu diesem Zweck können wir das nutzen “:hat()”Selektor.

Wählen Sie aus den beiden "" "Elementen das aus, das die" enthält "

"Element verwendet".Klassenname: Has (Kindername)”:

.Eltern-div: Has (h1)
Hintergrundfarbe: #103E6D;
Farbe: Muschel;
Breite: 150px;
Höhe: 150px;
Grenzradius: 50%;
Text-Align: Mitte;

Hier haben wir die folgenden CSS -Eigenschaften auf das übergeordnete Element angewendet:

• “HintergrundfarbeWird verwendet, um die Hintergrundfarbe des Elements anzugeben.
• “FarbeGibt die Elementtextfarbe an.
• “Breite”Wird verwendet, um die Elementbreite zu definieren.
• “HöheGibt die Höhe des Elements an.
• “GrenzradiusDie Eigenschaft wird verwendet, um die abgerundeten Ecken des Elements einzustellen.
• “TextausrichtungGibt die Textausrichtung an.

Ausgang

So wählen Sie alle untergeordneten Elemente aus?

Um das untergeordnete Element mit Hilfe des übergeordneten Selektors auszuwählen, gehen Sie das angegebene Beispiel durch.

Beispiel

Implementieren Sie die folgenden Schritte, um eine HTML -Seite zu erstellen:

• Fügen Sie ein Div -Element hinzu, das zwei enthält “

  "Tags und eine""Tag mit der Klasse"Kind-div”.

• Das Kind "div"Element enthält eine"

  " Element:

Hallo

Welt

Ich bin Kinderdiv

Wir können untergeordnete Elemente durch die Eltern auswählen. “" Klasse. Dies wählt nicht nur die direkte aus “P"Elemente, aber auch das verschachtelte"PElemente:

.Eltern-div p
Hintergrundfarbe: #7f167f;
Schriftfamilie: Kursiv;
Schriftgröße: 25px;
Text-Align: Mitte;
Farbe: Whitesmoke;

Ausgang

So wählen Sie alle direkten Kinderelemente aus?

Um das direkte Kind der übergeordneten DIV auszuwählen, können wir das verwenden>Symbol. Dies wird dazu beitragen, alle „P“ -Anemente auszuwählen, die das direkte Kind von Eltern sind”. Zum Beispiel haben wir die folgenden CSS -Eigenschaften angewendet:

.Eltern-div> p
Hintergrundfarbe: #7f167f;
Schriftfamilie: Kursiv;
Schriftgröße: 30px;
Text-Align: Mitte;
Farbe: Whitesmoke;

Der "SchriftfamilieGibt die Schrift des ausgewählten Elements an und “Schriftgröße”Wird verwendet, um die Größe der Schriftart zu definieren:

Ausgang

Wir haben über CSS -Eltern -Selektoren in HTML und CSS besprochen.

Abschluss

In CSS, die “:hat()”Selektor wird als übergeordnete Pseudoklasse verwendet. Es wird besonders verwendet, um übergeordnete Elemente auszuwählen. Zum Beispiel, ".Eltern-div: Has (H1)”Wählt das übergeordnete Element mit dem“ aus

Elemente. Um das untergeordnete Element des übergeordneten Elements auszuwählen, verwenden Sie “.Eltern-div p”. Die Zustandsanweisung kann auch verwendet werden, um alle direkten untergeordneten Elemente auszuwählen. In diesem Artikel wurde der CSS -Elternauswählte mit Beispielen erläutert.