”. Šādos gadījumos “ :has() ” tiek izmantota vecāku atlasītāja pseidoklase.
Šajā rakstā tiks aprakstīts:
- Kā izveidot vecāku elementa stilu, norādot tā bērnelementus?
- Kā atlasīt visus bērnu elementus?
- Kā atlasīt visus tiešos bērnu elementus?
Kā izveidot vecāku elementa stilu, norādot tā bērnelementus?
Vispirms izveidojiet HTML failu ar diviem “div” elementiem, kā norādīts tālāk.
- Pievienojiet divus ' 'elementi ar vienu un to pašu klasi' vecāks-div ”.
- Pirmajā ir divi ' ” elementi.
- Otrais elements “
” satur “ ' un ' ”: < div klasē = 'vecāks-div' >
< lpp > Sveiki < / lpp >
< lpp > pasaulē < / lpp >
< / div >
< div klasē = 'vecāks-div' >
< h1 > Sveiki < / h1 >
< lpp > Man ir 'h1' tags < / lpp >
< / div >Ja ir nepieciešams stils “
” elementam ar “ ” elementu, tad varam pielāgot vecāku elementa stilu, turot bērnu rokās. Šim nolūkam mēs varam izmantot ' :has() ” atlasītājs.
No abiem “
” elementiem atlasiet to, kurā ir elements “”, izmantojot “ .class-name:has(bērna vārds) ”:
.parent-div : ir ( h1 ) {
fona krāsa : #103e6d ;
krāsa : jūras gliemežvāks ;
platums : 150 pikseļi ;
augstums : 150 pikseļi ;
robeža-rādiuss : piecdesmit% ;
teksta līdzināšana : centrs ;
}Šeit mēs esam izmantojuši šādus CSS rekvizītus vecāku elementam:
- ' fona krāsa ” tiek izmantots, lai norādītu elementa fona krāsu.
- ' krāsa ” norāda elementa teksta krāsu.
- ' platums ” tiek izmantots, lai definētu elementa platumu.
- ' augstums ” norāda elementa augstumu.
- ' robeža-rādiuss ” rekvizīts tiek izmantots, lai iestatītu elementa noapaļotos stūrus.
- ' teksta līdzināšana ” norāda teksta līdzinājumu.
Izvade
Kā atlasīt visus bērnu elementus?
Lai atlasītu bērnelementu, izmantojot vecāku atlasītāju, skatiet norādīto piemēru.
Piemērs
Lai izveidotu HTML lapu, veiciet šādas darbības:
- Pievienojiet div elementu, kas satur divus ' ' atzīmes un ' 'taga ar klasi' bērns-div ”.
- Bērns ' div ” elements satur elementu “
< div klasē = 'vecāks-div' >”:
< lpp > Sveiki < / lpp >
< lpp > pasaulē < / lpp >
< div klasē = 'bērns-divs' >
< lpp > esmu bērns div < / lpp >
< / div >
< / div >Mēs varam atlasīt bērnu elementus, izmantojot vecāku '
” klase. Tas ne tikai atlasīs savu tiešo lpp ' elementi, bet arī atlasa ligzdoto ' lpp ” elementi: .parent-div lpp {
fona krāsa : #7F167F ;
fontu ģimene : kursīvs ;
fonta izmērs : 25 pikseļi ;
teksta līdzināšana : centrs ;
krāsa : balti dūmi ;
}Izvade
Kā atlasīt visus tiešos bērnu elementus?
Lai atlasītu vecāku div tiešo atvasinājumu, mēs varam izmantot “ > ” simbols. Tas palīdzēs atlasīt visus “p” elementus, kas ir tiešā vecāku atvasinātā daļa.
”. Piemēram, mēs esam izmantojuši šādus CSS rekvizītus: .parent-div > lpp {
fona krāsa : #7F167F ;
fontu ģimene : kursīvs ;
fonta izmērs : 30 pikseļi ;
teksta līdzināšana : centrs ;
krāsa : balti dūmi ;
}' fontu ģimene ' norāda atlasītā elementa fontu un ' fonta izmērs ” tiek izmantots, lai noteiktu fonta lielumu:
Izvade
Mēs esam apsprieduši CSS vecāku atlasītājus HTML un CSS.
Secinājums
CSS sistēmā “ :has() ” selektors tiek izmantots kā vecāku atlasītāja pseidoklase. To īpaši izmanto, lai atlasītu vecāku elementus. Piemēram, ' .parent-div:has(h1) ' atlasa vecākelementu ar ' ” elementi. Lai atlasītu vecākelementa bērna elementu, izmantojiet ' .parent-div lpp ”. Nosacījuma paziņojumu var izmantot arī, lai atlasītu visus tiešos pakārtotos elementus. Šajā rakstā ir izskaidrots CSS vecāku atlasītājs ar piemēriem.
- Bērns ' div ” elements satur elementu “