Velgerne i CSS er reglene som har mønsteret av elementer. På bakgrunn av disse mønstrene blir elementene valgt av nettleseren og justert i stiler. I noen tilfeller er det nødvendig å style elementene som har et spesifikt foreldreelement. For eksempel, hvis det er flere "" elementer tildelt med samme klasse, og det er påkrevd å style "div" som har "

" stikkord. I slike tilfeller ": har ()”Foreldreselger pseudoklasse brukes.

Dette innlegget vil beskrive:

• Hvordan style et overordnet element ved å spesifisere barnelementene?
• Hvordan velge alle barneelementer?
• Hvordan velge alle direkte barnelementer?

Hvordan style et overordnet element ved å spesifisere barnelementene?

Lag først en HTML -fil som har to “Div” -elementer som følger:

• Legg til to “”Elementer med samme klasse”Foreldre-div”.
• Den første inneholder to “

  ”Elementer.

• Det andre “” elementet inneholder ”

  ”Og“

  ”:

Hallo

verden

Hei

Jeg har "H1" -kode

Hvis det er påkrevd å style “" -elementet som har “

”Element, så kan vi justere stylingen av overordnet element ved å holde barnet. For dette formålet kan vi bruke ": har ()”Selector.

Velg den som inneholder "fra begge“ "elementene, velger den som inneholder“

”Element ved å bruke“.Klassenavn: har (barnetavn)”:

.Foreldre-div: har (h1)
Bakgrunnsfarge: #103E6D;
Farge: Seashell;
Bredde: 150px;
Høyde: 150px;
Border-Radius: 50%;
tekst-align: sentrum;

Her har vi brukt følgende CSS -egenskaper på overordnede element:

• “bakgrunnsfarge”Brukes til å spesifisere elementets bakgrunnsfarge.
• “farge”Angir elementet tekstfarge.
• “bredde”Brukes til å definere elementbredden.
• “høyde”Angir høyden på elementet.
• “Border-Radius”Eiendom brukes til å stille inn avrundede hjørner av elementet.
• “Tekstalign”Angir tekstjustering.

Produksjon

Hvordan velge alle barneelementer?

For å velge barnelement ved hjelp av overordnet velger, gå gjennom det gitte eksemplet.

Eksempel

Implementere følgende trinn for å opprette en HTML -side:

• Legg til et DIV -element som inneholder to “

  ”Tagger og en“”Tag å ha klassen”barn-div”.

• Barnet "div”Element inneholder et“

  ”Element:

Hallo

verden

Jeg er Child Div

Vi kan velge barneelementer gjennom foreldrene “”Klasse. Dette vil ikke bare velge dets direkte "p”Elementer, men velger også nestet”p”Elementer:

.Foreldre-div p
Bakgrunnsfarge: #7F167F;
Font-family: Cursive;
Font-størrelse: 25px;
tekst-align: sentrum;
Farge: Whitesmoke;

Produksjon

Hvordan velge alle direkte barnelementer?

For å velge den direkte barnet til foreldre -divet, kan vi bruke ">”Symbol. Dette vil bidra til å velge alle “P” -elementene som er foreldreens direkte barn ””. For eksempel har vi brukt følgende CSS -egenskaper:

.Foreldre-div> p
Bakgrunnsfarge: #7F167F;
Font-family: Cursive;
Font-størrelse: 30px;
tekst-align: sentrum;
Farge: Whitesmoke;

“Font-familie”Angir skrifttypen til det valgte elementet og“skriftstørrelse”Brukes til å definere størrelsen på skriften:

Produksjon

Vi har diskutert om CSS overordnede velgere i HTML og CSS.

Konklusjon

I CSS, “: har ()”Selector brukes som en overordnede pseudoklasse. Det brukes spesielt til å velge foreldreelementer. For eksempel, ".Foreldre-div: har (H1)”Velger overordnet element som har“

”Elementer. For å velge barnelementet i overordnede element, bruk “.Foreldre-div p”. Tilstandsuttalelsen kan også brukes til å velge alle de direkte barneelementene. Denne artikkelen har forklart CSS -overordnet velger med eksempler.