“. V takových případech se „ :má() ” je použita pseudotřída rodičovského selektoru.
Tento příspěvek bude popisovat:
- Jak upravit styl nadřazeného prvku zadáním jeho podřízených prvků?
- Jak vybrat všechny podřízené prvky?
- Jak vybrat všechny přímé dětské prvky?
Jak upravit styl nadřazeného prvku zadáním jeho podřízených prvků?
Nejprve vytvořte soubor HTML se dvěma prvky „div“ následovně:
- Přidejte dva“ 'prvky se stejnou třídou' rodič-div “.
- První obsahuje dvě „ ' Prvky.
- Druhý prvek „
“ obsahuje „ ' a ' “: < div třída = 'parent-div' >
< p > Ahoj < / p >
< p > svět < / p >
< / div >
< div třída = 'parent-div' >
< h1 > Ahoj < / h1 >
< p > Mám značku 'h1'. < / p >
< / div >Pokud je nutné upravit styl prvku „
“ s příznakem „ ”, pak můžeme upravit styling nadřazeného prvku přidržením potomka. K tomuto účelu můžeme využít „ :má() ” volič.
Z obou prvků „
“ vyberte ten, který obsahuje prvek „“ pomocí „ .class-name:has(child-name) “:
.rodič-div : má ( h1 ) {
barva pozadí : #103e6d ;
barva : mušle ;
šířka : 150 pixelů ;
výška : 150 pixelů ;
hraniční poloměr : padesátka% ;
zarovnání textu : centrum ;
}Zde jsme na nadřazený prvek použili následující vlastnosti CSS:
- “ barva pozadí “ se používá k určení barvy pozadí prvku.
- “ barva ” určuje barvu textu prvku.
- “ šířka ” se používá k definování šířky prvku.
- “ výška ” určuje výšku prvku.
- “ hraniční poloměr Vlastnost ” se používá k nastavení zaoblených rohů prvku.
- “ zarovnání textu ” určuje zarovnání textu.
Výstup
Jak vybrat všechny podřízené prvky?
Chcete-li vybrat podřízený prvek pomocí rodičovského selektoru, projděte si uvedený příklad.
Příklad
Chcete-li vytvořit stránku HTML, proveďte následující kroky:
- Přidejte prvek div, který obsahuje dva „ značky „“ a „ 'značka s třídou' dítě-div “.
- Dítě ' div prvek ” obsahuje prvek „
< div třída = 'parent-div' >“:
< p > Ahoj < / p >
< p > svět < / p >
< div třída = 'child-div' >
< p > jsem dítě div < / p >
< / div >
< / div >Podřízené prvky můžeme vybrat prostřednictvím nadřazeného „
“třída. Tím se nejen vybere jeho přímý „ p 'prvky, ale také vybere vnořené' p ' Prvky: .rodič-div p {
barva pozadí : #7F167F ;
rodina písem : kurzívní ;
velikost písma : 25 pixelů ;
zarovnání textu : centrum ;
barva : bílý kouř ;
}Výstup
Jak vybrat všechny přímé dětské prvky?
K výběru přímého potomka nadřazeného divu můžeme použít „ > symbol “. To pomůže vybrat všechny prvky „p“, které jsou přímým potomkem rodiče „
“. Použili jsme například následující vlastnosti CSS: .rodič-div > p {
barva pozadí : #7F167F ;
rodina písem : kurzívní ;
velikost písma : 30 pixelů ;
zarovnání textu : centrum ;
barva : bílý kouř ;
}' rodina písem “ určuje písmo vybraného prvku a „ velikost písma ” se používá k definování velikosti písma:
Výstup
Diskutovali jsme o selektorech rodičů CSS v HTML a CSS.
Závěr
V CSS je „ :má() ” selektor se používá jako nadřazená pseudotřída selektoru. Používá se zejména k výběru nadřazených prvků. Například, ' .parent-div:has(h1) 'vybere nadřazený prvek s ' ' Prvky. Chcete-li vybrat podřízený prvek nadřazeného prvku, použijte „ .rodič-div p “. Příkaz podmínky lze také použít k výběru všech přímých podřízených prvků. Tento článek vysvětluje selektor rodiče CSS na příkladech.
- Dítě ' div prvek ” obsahuje prvek „