Gyermekválasztók. Gyermek- és kontextuális css -választók A css gyermekelemeket választ

Azt hiszem, sokan tudják kontextusválasztók a CSS -ben... Ezeket leggyakrabban használják, azonban a tapasztalt elrendezéstervezők jól tudják, hogy néha a kontextusválasztók bizonyos problémákat okoznak. Ez a probléma összefügg azzal a ténnyel, hogy egy elem szerkezetében sok azonos elem lehet egymásba ágyazva. És a stílust nem minden beágyazott elemre kell alkalmazni, hanem csak a közvetlenül gyermek elemre. Ezt használják erre. gyermekválasztók a CSS -ben.

A probléma világosabbá tétele érdekében mondjunk egy kis példát. Legyen ilyenünk HTML kód:

Első bekezdés

Második bekezdés

És a mi feladatunk az, hogy csak piros legyen " Második bekezdés". Ha kontextusválasztóval írunk:

Konténer p (
piros szín;
}

Ekkor mindkét bekezdés pirossá válik, amire egyáltalán nincs szükségünk. Ez a feladat nagyon könnyen megoldható használatával gyermekválasztók a CSS -ben:

Konténer> p (
piros szín;
}

Minden, most csak vörös lettünk " Második bekezdés". Mivel ez a bekezdés közvetlenül a gyermeke .tartály... A " Első bekezdés"a belső gyermeke divígy nem esik a gyermekválasztó hatása alá.

Ilyen könnyen megoldhatók az ilyen feladatok, azonban van egy hatalmas hátránya. gyermekválasztók a CSS -ben- nem működnek böngészőkben internet böngésző ... Emiatt használatuk nagyon nem kívánatos. De ha hirtelen találkozol valahol, akkor most tudni fogod, mit jelent adott típus kiválasztók és mit csinálnak.

Elérted a fejezet harmadik részét. Itt megtanulhatja a gyermekválasztók használatát a CSS-ben, valamint néhány további pszeudo-osztályt a pontosabb mintavétel érdekében.

Gyermek CSS -választók

Az előző cikkben a HTML dokumentum elemei közötti kapcsolatokról beszéltünk, beleértve a gyerekeket is. Nézzünk egy példát arra, hogyan használhatók ezek a kapcsolatok a CSS -ben.

Képzelje el, hogy csak ezeket a címkéket kell formáznia

Amelyek gyermekei anélkül, hogy befolyásolná a többit

(például,

Leányvállalatai

).
Hogyan kell csinálni? Nagyon egyszerű: hozzunk létre egy gyermekválasztót:

Test> p (szín: # 333;)

Figyelje meg a> szimbólumot a törzs után. Ezzel azt jelzi, hogy a stílus kizárólag a gyermekcímkékre vonatkozik

Szülő ... Ha a szimbólum eltávolításra kerül, a stílus abszolút minden címkére vonatkozik.

Melyek a címke belsejében vannak , bár lehet, hogy nem ennek a gyermekei.

További pszeudo-osztályok

A CSS3-ban számos álosztály található a gyermekekkel való munkához. Az alábbiakban mindegyik leírását, felhasználási példáit, valamint a "gyermek" és a "típusú" álosztályok közötti különbségeket mutatjuk be.

: first-child-Ez az álosztály használható a weboldal meghatározott elemének stílusához, feltéve, hogy az első
: last -child - a stílus a megadott weboldal -elemre vonatkozik, feltéve, hogy az az utolsó szülő gyermeke;
: n -edik gyermek - lehetővé teszi a páros (páros) és páratlan (páratlan) gyermekek kiválasztását; ezt az álosztályt arra is használhatja, hogy a váltakozó gyermekek stílusát olyan kifejezések használatával használja, mint az an + b és a számok;
: only -child - A gyermek elemre vonatkozik, feltéve, hogy az az egyetlen gyermek szülővel;
: első típusú-a stílust alkalmazzák a megadott típus első eleméhez(még akkor is, ha ez az elem nem a szülő első gyermeke, és más típusú gyermekek fölötte vannak);
: last-of-type-pontosan ugyanúgy működik, mint az előző pszeudo-osztály, azzal a különbséggel, hogy a stílust alkalmazzák a megadott típus utolsó eleméhez;
: n-edik típus-úgy működik, mint: n-edik gyermek, de a típusú elem;
: only-of-type-a meghatározott típusú gyermekekre vonatkozik, feltéve, hogy a szülő rendelkezik vele típusának egyetlen gyermeke.

Példa használat: első gyermek ,: utolsó gyermek és: n. Gyermek

Első gyerek

Második gyermek

Harmadik gyermek

Páratlan szám

Páros szám

Páratlan szám

Páros szám

Utolsó gyerek

/ * CSS * / p: első gyermek (font-weight: bold; text-transform: nagybetű;) p: last-child (font-style: italic; font-size: 0.8em;) p: nth-child ( 3) (szín: piros;) tr: n-edik gyermek (páratlan) (háttér-szín: # A2DED0;) tr: n-edik gyermek (páros) (háttér-szín: # C8F7C5;) Pillanatkép: alkalmazás: első gyermek, : utolsó gyermek és: n-edik gyermek

Egy egyszerű HTML dokumentum gyermekei számára írtunk egy CSS stílust, ahol a címke

a címkék szülője

... Nézzük sorban a CSS -t.

Az első szabály - p: első gyermek - a p elemre vonatkozik: ha igen szülőjének első gyermeke, akkor a stílust alkalmazzák rá (esetünkben félkövér és a szöveget nagybetűsre konvertálja). Ha a megadott HTML -kódban közvetlenül a nyitó címke után

adjon hozzá más címkét (pl.

), akkor a p: első gyermek stílus már nem lesz renderelt, mert
Többé nem lesz az első gyermekcímke. Ebben az esetben az első gyermek h2 lesz.

Ugyanez történik a p: last -child szabállyal is - a CSS stílus a címkére lesz alkalmazva
Csak amikor megjelenik szülőjének utolsó gyermeke... Hozzáadás után
Bármilyen más típusú címke, és látni fogja, hogy a p: last-child szabály már nem érvényes.

A p: n. Gyermek (3) szabály működik harmadik gyermekcímke
(Ezt a zárójelben lévő 3 -as szám is bizonyítja). Ennek a bekezdésnek a betűszíne pirosra vált. Megváltoztathatja a 3 -as számot (például 2 -re), és megtekintheti az eredményt.

A tr: n-edik (páratlan) és a tr: n-edik (páros) szabályok a páratlan és páros tr elemekre vonatkoznak. Láthatja az eredményt a képernyőképen, valamint lemásolhatja a teljes kódot, és saját maga kísérletezhet a stílusokkal.

Használati példa: első-típus ,: utolsó-típus ,: típus-n-edik és: csak-típus

Első gyerek

Második gyermek

Harmadik gyermek

Negyedik gyermek

Ötödik gyermek

Utolsó gyerek

/ * CSS * / p: első típus (szín: ibolya; szövegátalakítás: nagybetű;) p: utolsó típus (betűtípus: dőlt; betűméret: 0.8em;) p: n. of-type (3) (szín: piros;) p: n-edik (páratlan) (background-color: # A2DED0;) p: n-edik (páros) (background-color: # C8F7C5;) h3: csak típus (szövegdíszítés: aláhúzás;)
Képernyőkép: Alkalmazás: első típus ,: utolsó típus ,: típus n-edik és: csak típus

Az első CSS-szabály, amelyet lát, a p: first-of-type. Mit csinal? Kiválaszt egy p típusú gyermeket, amely az első a szülőben fordul elő. És nem mindegy, hogy ez a címke hol található más típusú elemek között - az elsőben, a másodikban vagy a tizedikben. Ez a különbség az: első gyermek és az első típusú álosztályok között.

A második szabály, p: last-of-type, a stílust alkalmazza az utolsó p típusú gyermek. Amint a HTML -kódból látható, az utolsó címke után

Címke is van

, amelynek jelenléte semmilyen módon nem befolyásolja a CSS-szabály végrehajtását (ellentétben azzal a lehetőséggel, hogy: last-of-child).

A következő szabály - p: nth -of -type (3) - pirosra változtatja a betűtípust. Ezt a stílust alkalmazza a címkére
Ami harmadik saját típusú elem által a szülőnél. A képernyőképen látható, hogy a címke piros színű
Ami valójában a címke ötödik gyermeke
... De ha nem veszi figyelembe más típusú elemeket, akkor kiderül, hogy a címke
Piros betűtípussal a harmadik helyen áll (a típusa címkéi között). Ez a szabály így működik.

A p: n. Típusú (páros) és p: n. Típusú (páratlan) szabályok hasonló módon működnek: mivel a p nevet a vastagbél előtt adják meg, a p típusú páros és páratlan gyermekeket kiválasztják és színezik ban ben előre beállított színek... A többi elem kihagyásra kerül.

Az utolsó szabály - h3: csak típus - vonatkozik a címke tartalmára
a szöveg aláhúzásával. Ez a stílus csak a címke miatt működik
egy az egyetlen ilyen típusú gyermek. Ha egy másik címkét ad hozzá a HTML -kódhoz
, a stílus nem lesz alkalmazva.

következtetéseket

Az utód CSS -választó lehetővé teszi a HTML -dokumentum utódjának stílusát a szülő alapján.

További pszeudo-osztályok segítségével: first-child ,: last-child ,: nth-child ,: only-child, egy HTML dokumentum gyermek elemeinek stílusát állíthatja be, a helyükre fókuszálva, az elemfában számozva.

Az álosztályok: első-típus ,: típus-utolsó ,: típus-n-edik ,: csak-típus, lehetővé teszik a HTML dokumentum utóelemeinek stílusát azok típusa és számozása alapján a elemfa ...

Utolsó frissítés: 2016.04.21

Az álosztályok speciális csoportját ál-osztályok alkotják, amelyek lehetővé teszik bizonyos gyermekek kiválasztását:

: first-child: azt az elemet képviseli, amely az első gyermek

: last-child: azt az elemet jelöli, amely az utolsó gyermek

: only-child: azt az elemet jelöli, amely az egyetlen gyermek bizonyos tárolókban

: only-of-type: kiválaszt egy elemet, amely egy adott típus (címke) egyetlen eleme egyes tárolókban

: n-edik gyermek (n): egy olyan gyermekelemet képvisel, amelynek meghatározott száma n van, például a második gyermeket

: n-edik-utolsó gyermek (n): azt a gyermek elemet jelöli, amelynek meghatározott száma van a végétől kezdve

: n-edik típus (n): kiválaszt egy adott típusú gyermeket, amelynek meghatározott száma van

: n-utolsó-típus (n): kiválaszt egy adott típusú gyermeket, amelynek meghatározott száma van a végétől kezdve

Első gyermek álosztály

Az első gyermek álosztályt használjuk a blokkok első linkjeinek kiválasztásához:
Választók a CSS3 -ban
Tabletek

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

Okostelefonok

A legnépszerűbb okostelefonok 2016
Samsung Galaxy S7
Apple iPhone SE
Huawei P9

V: Az első gyermek stílust mutat egy linken, ha ez az elem első gyermeke.

A második blokkban pedig az első elem egy bekezdés, tehát egyik link sem stílusos.

Az utolsó gyermek álosztály

Az utolsó gyermek álosztályát használjuk:
Választók a CSS3 -ban
Okostelefonok

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Tabletek

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL
2016 -os adatok

Az a: last-child választó határozza meg az utolsó gyermekek hivatkozásainak stílusát.

Az első blokkban a link az utolsó gyermek elem. De a másodikban az utolsó gyermek a bekezdés, tehát a második blokkban a stílust egyik linkre sem alkalmazzák.

Csak gyermekválasztó

A: only-child szelektor kiválasztja azokat az elemeket, amelyek az egyedüli gyermekek a tartályokban:
Választók a CSS3 -ban
Cím

Szöveg1

Szöveg2

Szöveg3

Szöveg4

A "Text1" és "Text4" szövegekkel rendelkező bekezdések az egyetlen gyermekek a külső tartályukban, ezért piros betűszínnel vannak kialakítva.

Az egyetlen ilyen típusú pszeudo-osztály

Az egyedüli típusú pszeudo-osztály olyan elemet választ ki, amely az adott típusú egyedüli elem a tárolóban. Például egyetlen div elem, míg ugyanabban a tárolóban annyi más típusú elem is lehet.
Választók a CSS3 -ban
Fejléc

Egyetlen bekezdés és span elem

Lábléc

Bár a div elemekhez stílus van definiálva, ez nem lesz alkalmazva, mert a testtartályban két div van, nem egy. De csak egy p elem van a testben, ezért stílusos lesz. Ezenkívül a p tartályban csak egy span elem van, így ez is stílusos lesz.

Az n-edik gyermek álosztály

Az n-edik gyermek álosztály lehetővé teszi minden második, harmadik elem, csak páros vagy csak páratlan elemek stílusát stb.

Például formázzuk a táblázat páros és páratlan sorait:
Választók a CSS3 -ban
Okostelefonok

Samsung	Galaxy S7 Edge	60000
alma	iPhone SE	39000
Microsoft	Lumia 650	13500
Alcatel	Idol S4	30000
Huawei	P9	60000
Htc	HTC 10	50000
Meizu	Pro 6	40000
Xiaomi	Mi5	35000

A páratlan elemek stílusának meghatározásához a "páratlan" értéket adja át a választónak:

Tr: n-edik gyermek (páratlan) ()

Páros elemek stílusának kialakításához a "páros" értéket átadja a választónak:

Tr: n-edik gyermek (páros) ()

A stílusos elem számát is átadhatjuk ennek a választónak:

Tr: n-edik gyermek (3) (háttérszín: #bbb;)

Ebben az esetben a harmadik sor kerül kialakításra.

Egy másik lehetőség egy helyőrző használata a számhoz, amelyet az n betű fejez ki:

Tr: n-edik gyermek (2n + 1) (háttérszín: #bbb;)

Itt a stílust minden második páratlan sorra alkalmazzák.

Az n előtti szám (ebben az esetben 2) azt a gyermeket jelöli, amelyet a következőképpen kiemelnek. A plusz jelet követő szám azt jelzi, hogy melyik elemből kell elindítani a kiválasztást, vagyis a +1 azt jelenti, hogy az első gyermektől kell kezdeni.

Így ebben az esetben a kiválasztás az 1. elemből indul, és a következő 2 * 1 + 1 = 3. elem, majd 2 * 2 + 1 = 5. elem stb.

Például, ha minden harmadik elemet ki akarunk választani, kezdve a másodikkal, akkor ezt írhatjuk:

Tr: n-edik gyermek (3n + 2) (háttérszín: #bbb;)

Az: n-edik utolsó gyermek pszeudo-osztály lényegében ugyanazt a funkcionalitást biztosítja, kivéve, hogy az elemeket nem az elejétől, hanem a végétől számoljuk:

Tr: nth-last-child (2) (background-color: #bbb; / * 2 sor a végétől, vagyis az utolsó előtti * /) tr: nth-last-child (2n + 1) (background-color : #eee; / * páratlan sorok a végétől kezdődően * /)

Típusú pszeudo-osztály

Az: n-edik típusú pszeudo-osztály lehetővé teszi egy adott típusú gyermek kiválasztását egy adott szám alapján:

Tr: n-edik típus (2) (háttérszín: #bbb;)

A típus n-edik ál-osztálya hasonló módon működik, csak most az elemeket a végétől számoljuk:

Tr: n-edik utolsó típus (2n) (háttérszín: #bbb;)

Az elvégzendő feladat a gyermekek kiválasztása.
Megnevezés - láncolás: egyszerű szülőválasztó, ">" kombinátor, egyszerű gyermekválasztó.
Használati példa:

Állítsuk be a bal oldali behúzást a tartalomosztállyal közvetlenül az elembe ágyazott listához (ezek a szabályok nem befolyásolják a második beágyazási szint listáit):

Tartalom> ul (margó balra: 20 képpont;)

További információ a gyermekválasztóról

A fő különbség a gyermekválasztó és a korábban tárgyalt között az a tény, hogy ha a gyermekválasztó a fészkelési szinttől függetlenül kiválasztja az összes leszármazottat, akkor a gyermekválasztó csak az első szintű leszármazottakat - vagyis közvetlenül egymásba ágyazott elemeket - választja ki. Például írjuk ezt:

Div> span (szín: # 555; / * szürke * /)

... és ez a kód:

Ez a szöveg fekete lesz. Ez pedig szürke, mert ez a fesztáv egy div gyermeke.

Ismét fekete szöveg van. És ez a szöveg is fekete, mivel ez a tartomány nem a div gyermeke. Közvetlen szülője a p tag.

Az utód CSS -választók olyan szelektorok, amelyeket csak akkor használnak stílusok alkalmazására az elemekre, ha más (szülő) elemek gyermekei. A leszármazott szelektorokhoz hasonlóan a gyermekválasztók összetettek, és egyszerű választókból (osztályok, azonosítók stb.) Állnak.

Ismét, ha elfelejtette, hogy melyek a gyermek elemek, akkor emlékezzünk arra, hogy elemezzük az Ön számára már ismert példát.

<тег1> <тег2>... <тег3><тег4>...

Egy elemet egy másik elem gyermekének neveznek, ha benne van az első fészkelési szinten. Példánkban<тег2>és<тег3>lányok<тег1>, a<тег4>- ez egy lánya<тег3> .

A gyermekválasztók két vagy több egyszerű választóból állnak, amelyeket ">" választ el egymástól, ahol először a szülő szerepel, majd annak gyermeke, majd ennek a gyermeknek a gyermeke stb. Vagyis, mint a leszármazott szelektorokban, a dokumentumfa útvonala van megadva. A stílusok csak azokra az elemekre lesznek alkalmazva, amelyek kiválasztói az utolsóak a listában. Általános szintaxis:

selector1> selector2 (

A ">" jel mindkét oldalán lévő szóközök tetszés szerint használhatók vagy nem.

Példa CSS gyermekválasztók használatára

Gyermekválasztók

1. bekezdés

2. bekezdés

Eredmény a böngészőben

1. bekezdés

2. bekezdés

Ebben a példában két pontra kell figyelni. Itt három elem van, de csak kettő rendelkezik szegéllyel, párnázással és margóval. Miért? És a második pont. Csak az első bekezdés kék színű.

Az Internet Explorer 6.0 nem érti a gyermekválasztókat, ezért ha ezt a régi böngészőt szem előtt tartva építi fel webhelyét, vegye figyelembe ezt.

Gyermekválasztók a HTML táblákban

Sok újonc (és néha már nem kezdő) a webhelyek létrehozásakor bizonyos problémákkal szembesül, amikor gyermekválasztókat használ a HTML táblákban. Hogy értsd mit kérdéses, nézzünk egy ilyen közös táblázatot.

Cella 1.1	1.2. Cella
2.1. Cella	2.2. Cella

És most egy kérdés. Mi a teendő, ha a címkéről a cellákra kell navigálnia gyermekválasztók segítségével? Ha úgy dönt, hogy így ír, akkor téved:

táblázat> tr> td ( ingatlan érték; ingatlan érték; ...)

Kitalálod, miért baj? Nem? A tény az, hogy elfelejtett még egy elemet - amely, még ha nincs is kifejezetten megadva, mégis láthatatlanul jelen van minden HTML -táblában. Csak nem rendelkezik a szükséges nyitó és záró címkékkel, ezért gyakran figyelmen kívül hagyják. Mellesleg igen, bent HTML bemutató nem veled mentünk keresztül, mert a valóságban annak kifejezett jelzésére ritkán van szükség. Nos, azt hiszem, már sejtette, mi lesz helyes bejegyzés, de mindezt megmutatom.

táblázat> test> tr> td ( ingatlan érték; ingatlan érték; ...)

Egyébként nemcsak a táblázatok tartalmaznak választható nyitócímkékkel rendelkező elemeket, hanem vannak ilyen elemek is. Csak a gyakorlatban a "feledékenységi problémák" leggyakrabban asztalokkal jelentkeznek, ezért felhívtam erre a figyelmet.

Házi feladat.

Telepítse az Arial 0.9em betűtípust és némi hátteret az oldalon.
Írjon néhány címsort és bekezdést az oldalra, változtassa meg a címsor szövegének méretét és színét, ahogy jónak látja.
A linkeket közvetlenül az oldal bekezdéseiben tegye kék színűvé aláhúzás nélkül. Ugyanakkor, ha a linkeket ezenkívül bármilyen címkével keretezik, például dőlt betűvel, akkor azokat aláhúzással és pirossal kell megjeleníteni. Még egyszer felhívom a figyelmet arra a tényre, hogy nem kell minden egyes keretezőcímkéhez külön linkírási stílusokat írni, hanem egyetemessé tenni. Hogyan? Gondolkozz el róla.
Hozzon létre egy kis menüt az oldal jobb oldalán, és javítsa ki, ehhez szüksége van egy tulajdonságra és néhány más kapcsolódó tulajdonságra, ott kitalálja. Ugyanakkor hagyja, hogy a menü ne csak a helyén maradjon a böngészőablakban, hanem ne másszon át az oldal tartalmán görgetés közben.

Azt hiszem, a lecke utolsó pontja lesz a legnehezebb az Ön számára, de ne próbálja azonnal elmerülni a pozicionálás elsajátításában. Csak végezze el a házi feladatát. Ez az elem egyébként nem fog működni az Internet Explorer 6.0 -ban, mivel az öreg nem érti a rögzített pozicionálást.