”. W takich przypadkach „ :ma() ” używana jest pseudoklasa selektora nadrzędnego.
Ten post opisze:
- Jak stylizować element nadrzędny, określając jego elementy podrzędne?
- Jak wybrać wszystkie elementy potomne?
- Jak wybrać wszystkie bezpośrednie elementy potomne?
Jak stylizować element nadrzędny, określając jego elementy podrzędne?
Najpierw utwórz plik HTML zawierający dwa elementy „div” w następujący sposób:
- Dodaj dwa „
”elementy tej samej klasy” div nadrzędny ”. - Pierwsza zawiera dwa „ ' elementy.
- Drugi element „” zawiera „ ' oraz ' ”: < dz klasa = „dzieł nadrzędny” >
< p > Witam < / p >
< p > świat < / p >
< / dz >
< dz klasa = „dzieł nadrzędny” >
< h1 > Cześć < / h1 >
< p > Mam znacznik „h1”. < / p >
< / dz >Jeśli wymagane jest nadanie stylu elementowi „
”, który ma „ ”, wtedy możemy dostosować styl elementu nadrzędnego, trzymając element podrzędny. W tym celu możemy wykorzystać „ :ma() selektor.
Z obu elementów „
” wybierz ten, który zawiera element „”, używając „ .nazwa-klasy:has(imię-dziecka) ”:
.parent-div : ma ( h1 ) {
kolor tła : #103e6d ;
kolor : muszla ;
szerokość : 150 pikseli ;
Wysokość : 150 pikseli ;
promień granicy : pięćdziesiąt% ;
wyrównanie tekstu : Centrum ;
}Tutaj zastosowaliśmy następujące właściwości CSS w elemencie nadrzędnym:
- “ kolor tła ” służy do określenia koloru tła elementu.
- “ kolor ” określa kolor tekstu elementu.
- “ szerokość ” służy do określenia szerokości elementu.
- “ Wysokość ” określa wysokość elementu.
- “ promień granicy ” służy do ustawiania zaokrąglonych rogów elementu.
- “ wyrównanie tekstu ” określa wyrównanie tekstu.
Wyjście
Jak wybrać wszystkie elementy potomne?
Aby wybrać element potomny za pomocą selektora nadrzędnego, przejrzyj podany przykład.
Przykład
Wykonaj następujące kroki, aby utworzyć stronę HTML:
- Dodaj element div, który zawiera dwa „ ” tagi i „
” tag posiadający klasę „ dział-dziecko ”. - Dziecko ' dz ” zawiera element „
”:
< p > Witam < / p >
< p > świat < / p >
< dz klasa = 'dziecko-div' >
< p > jestem dzieckiem div < / p >
< / dz >
< / dz >Możemy wybrać elementy potomne poprzez element nadrzędny „
.parent-div p {' klasa. Spowoduje to nie tylko wybranie bezpośredniego „ p ” elementów, ale także wybiera zagnieżdżone „ p ' elementy:
kolor tła : #7F167F ;
rodzina czcionek : kursywny ;
rozmiar czcionki : 25px ;
wyrównanie tekstu : Centrum ;
kolor : biały dym ;
}Wyjście
Jak wybrać wszystkie bezpośrednie elementy potomne?
Aby wybrać bezpośrednie dziecko nadrzędnego elementu div, możemy użyć „ > symbolu ”. Pomoże to wybrać wszystkie elementy „p”, które są bezpośrednim dzieckiem rodzica „
.parent-div > p {”. Na przykład zastosowaliśmy następujące właściwości CSS:
kolor tła : #7F167F ;
rodzina czcionek : kursywny ;
rozmiar czcionki : 30px ;
wyrównanie tekstu : Centrum ;
kolor : biały dym ;
}„ rodzina czcionek ” określa czcionkę wybranego elementu, a „ rozmiar czcionki ” służy do określenia rozmiaru czcionki:
Wyjście
Omówiliśmy selektory nadrzędne CSS w HTML i CSS.
Wniosek
W CSS „ :ma() selektor jest używany jako pseudoklasa selektora nadrzędnego. Jest szczególnie używany do wybierania elementów nadrzędnych. Na przykład, ' .parent-div:has(h1) ” wybiera element nadrzędny mający „ ' elementy. Aby wybrać element potomny elementu nadrzędnego, użyj „ .parent-div str ”. Instrukcji warunku można również użyć do wybrania wszystkich bezpośrednich elementów podrzędnych. W tym artykule wyjaśniono selektor nadrzędny CSS z przykładami.