“-Tag zu formatieren. In solchen Fällen ist die „ :hat() ” Elternselektor-Pseudoklasse wird verwendet.
Dieser Beitrag beschreibt:
- Wie gestaltet man ein übergeordnetes Element, indem man seine untergeordneten Elemente angibt?
- Wie wähle ich alle untergeordneten Elemente aus?
- Wie wähle ich alle direkten untergeordneten Elemente aus?
Wie gestaltet man ein übergeordnetes Element, indem man seine untergeordneten Elemente angibt?
Erstellen Sie zunächst eine HTML-Datei mit zwei „div“-Elementen wie folgt:
- Füge zwei hinzu “ „Elemente gleicher Klasse“ Elternteil “.
- Das erste enthält zwei „ „Elemente.
- Das zweite „
“-Element enthält „ ' und ' “: < div Klasse = 'parent-div' >
< p > Hallo < / p >
< p > Welt < / p >
< / div >
< div Klasse = 'parent-div' >
< h1 > Hi < / h1 >
< p > Ich habe 'h1'-Tag < / p >
< / div >Wenn es erforderlich ist, das „
“-Element mit dem „ ”-Element, dann können wir das Styling des übergeordneten Elements anpassen, indem wir das untergeordnete Element halten. Zu diesem Zweck können wir das „ :hat() ” Selektor.
Wählen Sie aus den beiden „
“-Elementen dasjenige aus, das das „“-Element mit „ .class-name:has(child-name) “:
.parent-div : hat ( h1 ) {
Hintergrundfarbe : #103e6d ;
Farbe : Muschel ;
Breite : 150px ;
Höhe : 150px ;
Grenzradius : fünfzig% ;
Textausrichtung : Center ;
}Hier haben wir die folgenden CSS-Eigenschaften auf das übergeordnete Element angewendet:
- „ Hintergrundfarbe “ wird verwendet, um die Hintergrundfarbe des Elements anzugeben.
- „ Farbe ” gibt die Textfarbe des Elements an.
- „ Breite “ wird verwendet, um die Elementbreite zu definieren.
- „ Höhe ” gibt die Höhe des Elements an.
- „ Grenzradius ”-Eigenschaft wird verwendet, um die abgerundeten Ecken des Elements festzulegen.
- „ Textausrichtung ” gibt die Textausrichtung an.
Ausgabe
Wie wähle ich alle untergeordneten Elemente aus?
Um das untergeordnete Element mit Hilfe des übergeordneten Selektors auszuwählen, gehen Sie das gegebene Beispiel durch.
Beispiel
Führen Sie die folgenden Schritte aus, um eine HTML-Seite zu erstellen:
- Fügen Sie ein div-Element hinzu, das zwei „ ” Tags und ein “ „Tag mit der Klasse“ Kind-div “.
- Das Kind ' div ”-Element enthält ein „
< div Klasse = 'parent-div' >“-Element:
< p > Hallo < / p >
< p > Welt < / p >
< div Klasse = 'Kind-div' >
< p > ich bin Kind div < / p >
< / div >
< / div >Wir können untergeordnete Elemente über das übergeordnete Element auswählen.
' Klasse. Dadurch wird nicht nur sein direkter „ p ” Elemente sondern wählt auch die verschachtelten “ p ” Elemente: .parent-div p {
Hintergrundfarbe : #7F167F ;
Schriftfamilie : kursiv ;
Schriftgröße : 25px ;
Textausrichtung : Center ;
Farbe : weißer Rauch ;
}Ausgabe
Wie wähle ich alle direkten untergeordneten Elemente aus?
Um das direkte untergeordnete Element des übergeordneten Div auszuwählen, können wir das „ > “-Symbol. Dies hilft bei der Auswahl aller „p“-Elemente, die direkte untergeordnete Elemente des übergeordneten „
“. Beispielsweise haben wir die folgenden CSS-Eigenschaften angewendet: .parent-div > p {
Hintergrundfarbe : #7F167F ;
Schriftfamilie : kursiv ;
Schriftgröße : 30px ;
Textausrichtung : Center ;
Farbe : weißer Rauch ;
}Die ' Schriftfamilie ” gibt die Schriftart des ausgewählten Elements an und “ Schriftgröße “ wird verwendet, um die Größe der Schrift zu definieren:
Ausgabe
Wir haben über übergeordnete CSS-Selektoren in HTML und CSS gesprochen.
Fazit
Im CSS ist das „ :hat() ”-Selektor wird als übergeordnete Selektor-Pseudoklasse verwendet. Es wird insbesondere verwendet, um übergeordnete Elemente auszuwählen. Zum Beispiel, ' .parent-div:has(h1) “ wählt das übergeordnete Element mit dem „ „Elemente. Um das untergeordnete Element des übergeordneten Elements auszuwählen, verwenden Sie „ .parent-div p “. Die Bedingungsanweisung kann auch verwendet werden, um alle direkten untergeordneten Elemente auszuwählen. Dieser Artikel hat den übergeordneten CSS-Selektor anhand von Beispielen erklärt.
- Das Kind ' div ”-Element enthält ein „