” címkével rendelkező „div” stílust kell megadni. Ilyen esetekben a „ :van() ” szülőválasztó pszeudoosztályt használunk.
Ez a bejegyzés a következőket írja le:
- Hogyan alakíthatunk ki szülőelemet a gyermekelemek megadásával?
- Hogyan válasszuk ki az összes gyermekelemet?
- Hogyan válasszuk ki az összes közvetlen gyermekelemet?
Hogyan alakíthatunk ki szülőelemet a gyermekelemek megadásával?
Először hozzon létre egy HTML-fájlt két „div” elemmel az alábbiak szerint:
- Adj hozzá kettőt ' azonos osztályú elemek ' szülő-div ”.
- Az első két ' ” elemeket.
- A második „
” elem a következőt tartalmazza: ” és „ ”: < div osztály = 'szülő-div' >
< p > Helló < / p >
< p > világ < / p >
< / div >
< div osztály = 'szülő-div' >
< h1 > Szia < / h1 >
< p > Van 'h1' címkém < / p >
< / div >Ha szükséges a „
” elem stílusának megadása ” elemet, akkor a szülő elem stílusát a gyermek kézben tartásával állíthatjuk be. Erre a célra használhatjuk a „ :van() ” választó.
Mindkét „
” elem közül válassza ki azt, amelyik tartalmazza a „” elemet a „ .class-name:has(gyermeknév) ”:
.parent-div : van ( h1 ) {
háttérszín : #103e6d ;
szín : kagyló ;
szélesség : 150 képpont ;
magasság : 150 képpont ;
határ-sugár : ötven% ;
szöveg igazítás : központ ;
}Itt a következő CSS-tulajdonságokat alkalmaztuk a szülőelemen:
- ' háttérszín ” az elem háttérszínének megadására szolgál.
- ' szín ” határozza meg az elem szövegének színét.
- ' szélesség ” az elem szélességének meghatározására szolgál.
- ' magasság ” az elem magasságát adja meg.
- ' határ-sugár ” tulajdonság az elem lekerekített sarkainak beállítására szolgál.
- ' szöveg igazítás ” határozza meg a szöveg igazítását.
Kimenet
Hogyan válasszuk ki az összes gyermekelemet?
A gyermekelem kiválasztásához a szülőválasztó segítségével menjen végig a megadott példán.
Példa
HTML oldal létrehozásához hajtsa végre a következő lépéseket:
- Adjon hozzá egy div elemet, amely két ' ' címkék és egy ' 'címke, amelynek az osztálya' gyermek-div ”.
- A gyermek ' div ” elem egy „
< div osztály = 'szülő-div' >” elemet tartalmaz:
< p > Helló < / p >
< p > világ < / p >
< div osztály = 'gyermek-div' >
< p > gyermek div < / p >
< / div >
< / div >Kiválaszthatjuk a gyermek elemeket a szülőn keresztül
' osztály. Ez nem csak a közvetlen ' p ' elemeket, hanem kiválasztja a beágyazott ' p ” elemek: .parent-div p {
háttérszín : #7F167F ;
betűtípus család : kurzív ;
betűméret : 25 képpont ;
szöveg igazítás : központ ;
szín : fehér füst ;
}Kimenet
Hogyan válasszuk ki az összes közvetlen gyermekelemet?
A szülő div közvetlen gyermekének kiválasztásához használhatjuk a „ > ' szimbólum. Ez segít kiválasztani az összes „p” elemet, amely a szülő közvetlen gyermeke.
”. Például a következő CSS-tulajdonságokat alkalmaztuk: .parent-div > p {
háttérszín : #7F167F ;
betűtípus család : kurzív ;
betűméret : 30 képpont ;
szöveg igazítás : központ ;
szín : fehér füst ;
}Az ' betűtípus család ” megadja a kiválasztott elem betűtípusát és a „ betűméret ” a betűméret meghatározására szolgál:
Kimenet
Beszéltünk a HTML és CSS CSS szülőválasztóiról.
Következtetés
A CSS-ben a „ :van() ” szelektor szülőválasztó pszeudoosztályként használatos. Különösen a szülőelemek kiválasztására szolgál. Például, ' .parent-div:has(h1) ' kiválasztja azt a szülőelemet, amelynek ' ” elemeket. A szülő elem gyermek elemének kiválasztásához használja a ' .parent-div p ”. A feltétel utasítással az összes közvetlen gyermekelem kijelölhető. Ez a cikk példákkal magyarázza a CSS szülőválasztót.
- A gyermek ' div ” elem egy „