Helló, kedves olvasók! A tárgyak folytatása CSS-választékokat szeretnék felajánlani a leányvállalatok és a kontextusválasztók leírása, valamint összehasonlító elemzésük, mert az alkalmazás logikája szerint nagyon hasonlóak, bár vannak különbségük.

A kiadványaimban részletesen maradtam különböző típusú CSS-választókban :; továbbá . By the way, az utolsó cikkben, ahol különböző típusú attribútumválasztó szétszerelt, részletesen leírtam, hogy az elméleti számítások azonnal ellenőrizhetők a HTML és a CSS kód online módosításával a beépített Google Chrome () eszköz. Az ilyen szerkesztési eszközöknek minden népszerű böngésző legújabb módosítása van, beleértve a Firefox firefox () fiaibug-plugint.

E bejegyzés elméleti anyaga is tanulmányozható bármely webhely bármely oldalának szerkesztésével! Ehhez egyszerűen nyomja meg az F12 gombot, ha a Google Chrome vagy a Mozilla Firefox (). És most bemutatom a P-címke tartalmát, amely példáján fogunk tanulni alszekrény és kontextuális CSS-választók:

Ez a bekezdés magában foglalja em és erős formázási címkékA szöveg kiosztása zsír és dőlt.

A fent leírt szerkesztési eszköz használatával közvetlenül beillesztettem ezt a bekezdést erre a cikkre, pontozva a megfelelő szöveget az ablak bal oldalán szerkesztéséhez, amelynek eredményeképpen a bekezdés szövege az oldal tetejére jelent meg:

Ez a HTML design ,. Ez a bekezdés lesz kísérleti mai kiadvány, az ő példában bemutatjuk, hogy a tervezési, aközben változik, attól függően, melyik szelektor - gyermek vagy kontextus - használnak CSS szabályt.

A lányt olyan elemnek nevezik, amely közvetlenül a szülő belsejében található. Mielőtt közvetlenül a témához vezetne, egy képet adok, amely tükrözi a címke hierarchiáját a HTML-dokumentumban a bekezdés példáján, amelynek szövegét megadjuk, és amelyet ma szétszerelünk:

Ezt a kialakítást az elemek fája is nevezik. Ebben az ábrán a fészkelő tartályok egyértelműen képviseltetik magukat, ami a címkék közötti hierarchikus kapcsolatokat jelent. A P. bekezdés címke egy leányvállalat elem. Ugyanakkor az erős címke nem leányvállalat DIV-hez, mivel a P konténerben versenyez.

A CSS-szelektor leányválasztója

A gyermekválasztó az elemek fában mindig közvetlenül a szülőelem belsejében van, ebben az esetben a CSS-választó írásának szintaxisa a következő:

A stílust a 2 szelektorra kell alkalmazni, de csak akkor, ha ez egy gyermek választó számára 1. részletesebben elemezzük a fenti képernyőképet az elemek fával. Például a szintaxist követve beállíthatja ezt a szabályt:

P\u003e em (szín: zöld;)

Ez a szabály befolyásolja az utolsó szó "dőlt" bekezdést, mivel az EM megnyitó és záró címkéi között lezárul. Az EM tag a P leányvállalat, mert közvetlenül belépnek benne, ezért a tartalom szövege, nevezetesen a "dőlt" szót zölden festjük.

Ugyanakkor a másik EM címke nem szolgál közvetlen leszármazottja a P tag, mivel ez része az erős tag, ennek eredményeként, amelynek része a bekezdés „formázást EM és erős” nem festhető.

Kontextus CSS-választó

Ez egy sor, amellyel kitalálni mi a kontextuális CSS-választó. Ha egy vagy más webhelyoldalt nagyon gyakran felállítunk, a címkéket egy másikba fektetik be. Annak érdekében, hogy az ilyen elemek helyesen működjenek, a választékokat használják, amelyek valamilyen kontextusban járnak el, ezért a név.

Ha ahhoz, hogy a CSS szabályt kell alkalmazni, a gyermek választó kell elhelyezni közvetlenül belül a szülő elem (az első szint a beágyazás), majd a helyi választó teljesen lényegtelen, és minden szinten egymásba lehet alkalmazni, mind a Az elem egyenlő tulajdonságai átkerülnek a szülőből. Ugyanakkor a szintaxis:

Amint látja, a kontextusválasztó egy olyan egyszerű választókból áll, amelyeket egy tér választott el. A kontextuális választók esetében két és több címkét használhat egymásba. Most CSS-szabályt készítünk a teszt bekezdésre, amelyet fent vezetett:

P em (szín: zöld;)

Amint láthatod, a zöld nemcsak a bekezdés tartalmának szövege, amely közvetlenül az EM formázási címkéjében van kötve, azaz a "dőlt" szó, hanem a másik EM tag szövegének szövege is magában foglalja az erős címkét is. Ez történt, mert a szabályt a kontextusválasztóval alkalmazza, amelyre a fészkelő szint nem fontos a leányvállalattal ellentétben. Ez a leányvállalat és a kontextusválasztó közötti fő különbség.

Tekintsünk egy másik példát a kontextus és a gyermekválasztók kölcsönhatásának bekezdésével. A következő CSS-szabályok meghatározása a leányvállalatra és a kontextusválasztóra:

Div em (szín: piros,) p\u003e em (színes: zöld;)

Ezt követően bekezdésünk megszerzi az ilyen tervet:

Mint látható, a szöveg egy részét zárt az EM és erős címkéket festett vörös, mert úgy tisztességes, hogy a kontextus választó szabályt, vagyis a EM címke megkötött Erős és Div konténerek, és fészkelő szinten , ahogy már megjegyezték, nem számít.

A kérdés merül fel: Miért van a "dőlt" szó, amely szintén az EM tartalma, zölden festett? Végtére is, és neki a kontextuális választó szabály releváns. De a bekezdés szövegének e szakaszában a lányválasztó szabálya is igaz, mert nem ellentétes a gyermekválasztó számára, az elemnek közvetlenül be kell írnia a P. címkét.

A tény az, hogy a CSS-nek elsőbbségi törvénye van az alábbi CSS-tulajdonságoknak. Ez ebben az esetben a lányválasztó szabálya az alábbi dokumentumban van, mint a DIV konténer kontextusválasztójához előírt CSS stílusok. Ezért a "dőlt" szó zöld lett. Ha bizonyos helyeken megváltoztatja őket, a "P\u003e EM (Szín: zöld,)" szabály megszűnik, és a szöveg "dőlt" szövege piros lesz.

Leírás

Pseudo-osztály: NTH-Gyermek használható az elemek alapú elemek hozzáadására.

Szintaxis

element: nth-child (páratlan | Még |<число> | <выражение>) {...}

Értékek

Páratlan minden páratlan elem szám. Még az összes egyenletes elem. A gyermekelem szekvencia számának száma a szülőhöz képest. A számozás 1-vel kezdődik, ez lesz az első elem a listában. A kifejezés + B formájában van beállítva, ahol A és B egész számok és N - a számláló, amely automatikusan megteszi az értéket 0, 1, 2 ...

Ha a nulla, akkor nincs írva, és a rekord a b értékre csökken. Ha B nulla, akkor is nincs megadva, és az expresszió egy. Az A és B negatív számok lehetnek, ebben az esetben a plusz jel változik a mínusz, például: 5N-1.

Az A és B negatív értékek használata miatt egyes eredmények is negatívak vagy nulla lehetnek. Mindazonáltal csak pozitív értékek befolyásolják az elemeket, mivel az elemek számozása 1-vel kezdődik.

A lapon. Az 1. ábra néhány lehetséges kifejezést és kulcsszavakat mutat be, és azt is meg kell adni, hogy mely elemek száma is részt vesz.

Html5 css3, azaz CR OP SA FX

	2134	2135	2136	2137	2138
Olaj	16	34	62	74	57
Arany	4	69	72	56	47
Faipari	7	73	79	34	86
Kövek	23	34	88	53	103

Ebben a példában a pszeudo-osztály: NTH-Child használják változtatni a stílusát az első sorban a táblázat, valamint, hogy kiemelje a színe minden páros sor (1.).

Utolsó frissítés: 04/21/2016

A pszeudoklassok speciális csoportja pszeudoklassokat képez, amelyek lehetővé teszik bizonyos gyermekelemek kiválasztását:

: Első gyermek: olyan elemet képvisel, amely az első gyermekelem

: Utolsó gyermek: olyan elemet képvisel, amely az utolsó gyermekelem

: Csak gyermek: olyan elemet képvisel, amely az egyetlen leányvállalat egy bizonyos tartályban

: Csak típusú: Kiválaszt egy elemet, amely egy bizonyos típusú (címke) egyetlen eleme egy bizonyos tartályban

: Nth-child (n): olyan gyermekelem, amelynek van egy specifikus N szám, például a második gyermekelem

: Nth-Last-Child (N): olyan gyermekelemet mutat be, amelynek van egy specifikus N száma, a végétől kezdve

: Nth-of-type (n): kiválaszt egy bizonyos típusú gyermekelemet, amely rendelkezik egy adott számmal

: Nth-utolsó típusú (n): kiválaszt egy bizonyos típusú gyermekelemet, amely egy adott számmal kezdődik a végétől kezdődően

Pszeudo osztály első gyermek

Az első gyermek pszeudoklasszát használjuk az első blokkok első linkjeinek kiválasztásához:

Tabletek

Okostelefonok

Választók Stílus A: Az első gyermek a linkre vonatkozik, ha ez az elem első gyermek eleme.

És a második blokkban az első elem egy bekezdés, így a stílus nem vonatkozik a linkre.

Pseudolass utolsó gyermek

A pszeudolasszus utolsó gyermekét használjuk:

Okostelefonok

Tabletek

A Választó: Az utolsó gyermek határozza meg az utolsó lányelemek referenciáinak stílust.

Az első blokkban csak az utolsó leányvállalat egy link. De a második utolsó gyermekelemben a bekezdés az, így a második blokkban a stílus nem vonatkozik a linkek bármelyikére.

Csak gyermekválasztó

Választó: Csak gyermek kiválasztja az elemeket, amelyek az egyetlen lányelemek az edényekben:

Cím

A "Text1" és a "Text4" szövegekkel rendelkező bekezdések az egyetlen gyermekelemek a külső tartályokban, így a stílust alkalmazzák rájuk - piros betűtípus.

Pseudo-osztály csak típusú

A Pseudo-osztály csak a típusú kiválasztja az elemet, amely az egyetlen típusú elem a tartályban. Például az egyetlen div elem, az azonos tartályban lévő más típusú elemekkel, amennyire csak tetszik.

Kizárólag bekezdés és spun elem

Bár a stílust div elemeknél definiálják, nem alkalmazzák, mivel a testtartály két div elemet tartalmaz, és nem egy. De a testben csak egy P elem van, így egy stilizálást kap. És a P tartályban is csak egy span elem van, így stilizált lesz.

Nth-child pszeudo osztály

Az NTH-Child Pseudo osztály lehetővé teszi, hogy minden második, a harmadik elemet, csak páros vagy csak páratlan elemeket stb.

Például stilizálható egyenletes és páratlan asztali vonalak:

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 választót "páratlan" -ra továbbítják:

Tr: nth-child (páratlan) ()

A választóban lévő egyenletes elemek kialakításához az "Még" értéket továbbítják:

TR: nth-child (még) ()

Ezen a választóban továbbíthatjuk a stilizált elem számát:

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

Ebben az esetben a harmadik sor stilizált.

Egy másik lehetőség a szám helyettesítőjének használata, amelyet az N betűvel fejez ki:

TR: nth-child (2n + 1) (háttérszín: #bbb;)

Itt a stílus minden második páratlan karakterláncra vonatkozik.

Az N (ebben az esetben 2) előtti szám a következő gyermekelemet képviseli, amely az alábbiak szerint kerül sor. A szám után jön a plusz jel jelenik meg, ahonnan elem meg kell kezdeni a kiválasztás, vagyis 1 azt jelenti, hogy el kell kezdeni az első gyermek elem.

Így ebben az esetben a kiválasztás az 1. elemgel kezdődik, és a következők ki vannak adva 2 * 1 + 1 \u003d 3. elem, a továbbiakban 2 * 2 + 1 \u003d 5th elem és így tovább.

Például, ha minden harmadik elemet szeretnénk elosztani, a másodiktól kezdve írhatnánk:

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

Pseudo-osztály: Az nth-utolsó gyermek lényegében ugyanolyan funkcionalitást biztosít, csak az elemek visszaszámlása nem az elejétől, hanem a végétől:

TR: nth-utolsó gyermek (2) (háttérszín: #bbb; / * 2 sor a végétől, azaz az utolsó előtti * /) tr: nth-utolsó gyermek (2n + 1) (háttérszín) : #eee; / * páratlan vonalak, a végén * /)

NTH-OF típusú pszeudo osztály

Pseudo-osztály: nth-of-type Lehetővé teszi egy bizonyos típusú gyermekelem kiválasztását egy adott számban:

TR: NTH-OF típusú (2) (háttérszín: #bbb;)

Hasonlóképpen, az NTH-utolsó típusú pszeudo osztály működik, csak most az elemek visszaszámlálása a végéből származik:

TR: nth-utolsó típusú (2n) (háttérszín: #bb;)

Azt hiszem, sokan tudnak kontextus választók a CSS-ben. A leggyakrabban használják őket, azonban a tapasztalt kameramen tökéletesen jól ismeri, hogy néha a kontextusválasztók bizonyos problémákat okoznak. Ez a probléma az a tény, hogy az elem szerkezetében sok azonos elem van beágyazva egymásba. És szükség van a stílust nem minden beágyazott elemre, hanem közvetlenül a közvetlen elemre. Itt és használták lányos választók a CSS-ben.

Annak érdekében, hogy a probléma érthetőbbé váljon, adjunk egy kis példát. Legyen ilyenek HTML kód:

És feladata, hogy csak piros legyen " Második bekezdés"Ha a kontextusválasztóval írjuk:

Konténer p (
Piros szín;
}

Hogy mindkét bekezdésre piros leszünk, hogy egyáltalán nem kellene. Ezt a feladatot nagyon egyszerűen megoldják lányos választók a CSS-ben:

Konténer\u003e p (
Piros szín;
}

Mindent, most csak piros lettünk " Második bekezdés". Mivel ez a bekezdés közvetlenül leányvállalat .tartály. DE " Első bekezdés"A belső leányvállalat divÍgy a gyermekválasztó hatása alatt nem esik le.

Ez a feladat olyan könnyen megoldható, azonban van egy hatalmas mínusz lányos választók a CSS-ben - nem működik a böngészőkben Internet böngésző.. Ezért használatuk rendkívül nemkívánatos. De ha hirtelen találkozol valahol, akkor tudni fogod, hogy ez milyen típusú választók mit jelent, és mit csinál.

Ennek a választónak a fő feladata a nevéből következik, és a gyermekelem eléréséhez áll. Megjeleníti az "\u003e" elemi jel segítségével, amely egy gyermekelemet egy szülőelemmel köti össze. Érdemes megjegyezni, hogy az egyszerű választók a forgalomban vannak. Például vegye figyelembe a következő kódolást:

Elem\u003e ul (Padding - Top: 20px;)

Ez a kódolás azt jelenti, hogy a felső szélen 20 pixel belső francia bekezdés kerül alkalmazásra az elembe fektetett listára. A jelenléti ikon jelenléte azt mutatja, hogy a szabály csak a fészkelés első szintjére vonatkozó listákra vonatkozik.

A gyermekelem munkakerejének részletes elemzése

A gyermek elemének választója hasonló tulajdonságokkal rendelkezik a leszármazott választó fogalmával. Van azonban olyan jellemző tulajdonság, amely a műveletek közötti fő különbséget mutatja. Az a tény, hogy a leszármazóválasztó hatása teljesen minden elemre kiterjed, míg a gyermekválasztó alárendeli az első osztályozási szint pozíciójának stílusát.

A leányvállalat üzemeltetőjének egyértelműbbé tétele a következő példában:

Div\u003e r (szín: # ff0000, / * piros * /)

< div> Ez a karakterlánc alapértelmezett fekete szöveggel rendelkezik.< span> Ez a vonal pirosra fest, mivel a p jelentése a diva lánya. < p> Ismét fekete betűket látunk.< span> Itt is láttuk a fekete karaktereket, mivel ez a span, a szülő a címke.

Ez a példa megerősíti a leányvállalat munkáját a fészkelés mértéke szerint.

A leányvállalat üzemeltetőjének korlátozása

Érdemes megjegyezni, hogy ezt a műveletet a legendás internetes felfedezőtől eltérő böngészők támogatják. külön cikkben kell leírni.

Miért kell alkalmazni

A programozók a gyermekelemek szelektoraira utalnak olyan esetekben, amikor egyedi stílusát kell hozzárendelni a beágyazott elemekkel. Ezen választó segítségével csökkentheti a CSS-kötetet, amely növeli a dokumentum olvashatóságát. Mivel a gyakorlatban ezt a műveletet leggyakrabban a legördülő menük létrehozásakor említik.

A gyermekelem választóját is használják arra is, hogy egyedi stílusokat hozzanak létre olyan elemekhez, amelyeknek a szülei már ismertek már korábban. Más szavakkal:

Fő\u003e Fejléc ( / * A regisztráció csak a fő hetre vonatkozik * / }

Ez a példa olyan esetekben, amikor a fejléccímkét a cikkek címei kiemelésére használják. A mi esetünkben csak a főbb hetereket kérjük, és nem ártunk a másodlagos. Ez a technika elkerüli a kiterjesztési azonosítók használatát is, amelyek viszont megkönnyítik a CSS-fájl súlyát, és könnyebbé teszik.

Összegezve

Így a kiegészítő kezelő lehet alkalmazni nem csak a design a legördülő menük, hanem egy kis optimalizálás az internet forrás munkát kereső robotok.