Dobrý deň, drahí čitatelia! Pokračovať v objekte CSS voliči, ktoré vám chcem ponúknuť opis dcérskych spoločností a kontextových voličov, ako aj ich porovnávacia analýza, pretože podľa logiky aplikácie sú veľmi podobné, aj keď majú nejaký rozdiel.

V mojich publikáciách som pozostal podrobne v rôznych typoch voličov CSS:; ako aj . Mimochodom, v poslednom článku, kde rôzne typy voliča atribútu demontovali, podrobne opísali podrobne, ako sa moje teoretické výpočty môžu okamžite skontrolovať vykonaním zmien na HTML a CSS Code online pomocou vstavaného prehliadača Google Chrome () nástroj. Takéto nástroje na úpravu majú najnovšie úpravy všetkých populárnych prehliadačov, vrátane Firebag plugin pre Firefox ().

Teoretický materiál tohto príspevku možno tiež študovať vykonaním akejkoľvek stránky ľubovoľnej stránky! Ak to chcete urobiť, jednoducho stlačte F12, ak používate Google Chrome alebo Mozilla Firefox (). A teraz prezenznem obsah p-tag, na príklad, z ktorých budeme študovať subsity a kontextové selektory CSS:

Tento odsek zahŕňa em a silné značky formátovaniaktoré prideľujú text tuk a kurzíva.

Pomocou vyššie opísaného nástroja na úpravu som vložil tento odsek priamo k tomuto článku, čím sa získal zodpovedajúci text na ľavej strane okna, ktorý sa má upraviť, v dôsledku čoho sa text tohto odseku objavil na samom hornej časti stránky:

Tento html dizajn ,. Tento odsek bude experimentálny v dnešnej publikácii, v jeho príklade ukážem, ako sa konštrukcia jeho textu mení, v závislosti na tom, ktoré selektory - dieťa alebo kontextové - sa používajú v pravidle CSS.

Dcéra sa nazýva prvok, ktorý sa nachádza priamo vo vnútri rodiča. Pred pokračovaním priamo na tému, budem dať obrázok, ktorý odráža hierarchiu tagu v dokumente HTML na príklade odseku, ktorého text je uvedený vyššie a ktorý dnes budeme rozobrať:

Tento dizajn sa tiež nazýva strom prvkov. Na tomto obrázku sú hniezdiace kontajnery jasne zastúpené, čo znamená hierarchické vzťahy medzi tagmi. Odsek P tag je pomocný prvok vo vzťahu. Zároveň silná značka nie je dcérskou spoločnosťou pre div, pretože je pretekaná v nádobe na P.

Dcérska spoločnosť CSS

Selector pre deti v strome prvkov je vždy priamo vo vnútri rodičovského prvku, v tomto prípade bude syntax písania CSS voliča nasledovne:

Štýl sa použije na volič 2, ale iba ak je to dieťa pre volič 1. Budeme podrobnejšie analyzovať pomocou vyššie uvedenej snímky s stromom prvkov. Po syntaxe môžete napríklad nastaviť toto pravidlo:

P\u003e em (farba: zelená;)

Toto pravidlo ovplyvní posledný odsek "kurzíva", pretože sa uzatvára medzi otvorením a zatváraním značiek EM. Značka EM je dcérskou spoločnosťou pre P, pretože je umiestnená priamo vo vnútri, preto bude text obsahu, konkrétne slovo "kurzíva" bude natretý zeleným.

Avšak, druhá em tag nebudú slúžiť ako priamy potomok PAGE P tagu, pretože je súčasťou silnej značky, v dôsledku ktorej časť odseku "Formátovanie značiek EM a Silné" nebude maľované.

Kontextový výber CSS

Je to fronta na zistenie Čo je to kontextový výber CSS. Pri pokládke jednej alebo inej stránky stránky veľmi často, štítky sa investujú do jedného do druhého. Aby boli štýly pre takéto prvky správne fungovať správne, používajú sa voliči, ktoré koná v určitom kontexte, teda názov.

Ak je potrebné uplatniť pravidlo CSS, musí byť selekčný selector umiestnený priamo vo vnútri rodičovského prvku (prvá úroveň hniezdenia), potom pre výberový volič je úplne nedôležité a je možné aplikovať akúkoľvek úroveň hniezdenia, všetky Rovnaké vlastnosti prvku budú prevedené z rodičov. Zároveň je syntax:

Ako vidíte, kontextový selektor sa skladá z jednoduchých voličov oddelených medzerou. V prípade kontextových voličov je možné použiť dve a viac značky investované do seba. Teraz urobíme pravidlo CSS pre testovací odsek, ktorý som viedol vyššie:

P em (farba: zelená;)

Ako vidíte, zelená je zafarbená nielen textom obsahu odseku, ktorý je priamo uzatvorený vo formátovacej značke EM, to znamená, že slovo "kurzívy", ale aj text textu inej em tag, ktorý Zahŕňa aj silnú značku. Stalo sa to, pretože to uplatňuje pravidlo s kontextovým voličom, pre ktoré úroveň hniezdenia nie je v rozpore s dcérskou spoločnosťou. Ide o hlavný rozdiel medzi dcérskym a kontextovým voličom.

Zvážte ďalší príklad interakcie kontextových a detských voličov s naším odsekom. Vozíhanie ďalších pravidiel CSS pre dcérsky a kontextový volič:

Div EM (farba: červená;) p\u003e em (farba: zelená;)

Náš odsek zastáva takýto dizajn:

Ako môžete vidieť, kus textu uzavretého v em a silnými značkami sú maľované červenou farbou, pretože je spravodlivé v súvislosti s kontextovým voličom, to znamená, že em tag je uzatvorená v silných a divových kontajneroch a úroveň hniezdenia Ako už bolo zaznamenané, nezáleží na tom.

Vzniká otázka: Prečo je slovo "kurzíva", ktorý je tiež obsahom em, maľovaný zelenou? Koniec koncov a pre neho je relevantné kontextové pravidlo voliča. Pre túto časť textu odseku je však pravidlo voliča dcéry tiež pravdivé, pretože nie je v rozpore s podmienkou, že pre selector pre deti by mal prvok priamo zadať značku P.

Faktom je, že CSS má prioritný zákon o nehnuteľnosti CSS nižšie. To znamená, že v tomto prípade je pravidlo voliča dcéry v dokumente nižšie ako štýly CSS predpísané pre výber kontextu DIV kontajnera. Preto sa slovo "kurzíva" stalo zelenou. Ak ich zmeníte na niektorých miestach, pravidlo "p\u003e em (farba: zelená;)" prestáva konať a text textu "kurzíva" bude červená.

Popis

Pseudo-Trieda: NTH-Dieťa sa používa na pridanie štýlu do prvkov na základe stromov prvkov.

Syntax

element: nth-dieťa (nepárne | dokonca<число> | <выражение>) {...}

Hodnosť

Nepárne všetky nepárne prvky čísla. Dokonca aj všetky počty prvkov. Počet sekvenčného čísla detského prvku vzhľadom na jeho rodič. Číslovanie začína 1, bude to prvý prvok v zozname. Výraz je nastavený vo forme + B, kde A a B celé čísla a n - počítadlo, ktoré automaticky berie hodnotu 0, 1, 2 ...

Ak je nulová, nie je napísaná a záznam sa zníži na b. Ak je B nulová, nie je tiež špecifikovaná a výraz je napísaný vo forme. A A B môžu byť záporné čísla, v tomto prípade sa znamienko plus zmeny mínus, napríklad: 5N-1.

Vzhľadom na použitie negatívnych hodnôt A a B môžu byť niektoré výsledky tiež negatívne alebo rovné nule. Avšak len pozitívne hodnoty ovplyvňujú prvky vzhľadom na to, že číslovanie prvkov začína 1.

V Tab. 1 ukazuje niektoré možné výrazy a kľúčové slová a tiež špecifikované, ktoré čísla prvkov bude zapojených.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
Olej	16	34	62	74	57
Zlatý	4	69	72	56	47
Drevo	7	73	79	34	86
Kamene	23	34	88	53	103

V tomto príklade sa pseudo-trieda: nth-dieťa používa na zmenu štýlu prvého radu tabuľky, ako aj na zvýraznenie farby všetkých dokonca radov (obr. 1).

Posledná aktualizácia: 04/21/2016

Špeciálna skupina pseudoklasov tvoria pseudoklasy, ktoré vám umožnia vybrať si určité detské prvky:

: Prvé dieťa: predstavuje prvok, ktorý je prvým detským prvkom

: Posledné dieťa: predstavuje položku, ktorá je posledným detským prvkom

: iba dieťa: predstavuje prvok, ktorý je jedinou dcérskou spoločnosťou v niektorom kontajneri

: Iba-of-Type: Vyberie položku, ktorá je jediným prvkom určitého typu (tag) v niektorom kontajneri

: NTH-Dieťa (n): predstavuje detský prvok, ktorý má špecifické n číslo, napríklad druhý detský prvok

: NTH-last-dieťa (n): predstavuje detský prvok, ktorý má špecifické číslo n, počnúc od konca

: NTH-of-Type (n): Vyberie určitý typ detského prvku, ktorý má špecifické číslo

: NTH-last-of-type (n): vyberie detský prvok určitého typu, ktorý má špecifické číslo začínajúce od konca

Pseudo trieda prvé dieťa

Používame prvé dieťa pseudoclass vybrať prvé odkazy v blokoch:

Tablety

Smartfóny

Voliteľný štýl A: Prvé dieťa sa vzťahuje na odkaz, ak je prvým detským prvkom akéhokoľvek prvku.

A v druhom bloku je prvým prvkom odsekom, takže štýl sa nevzťahuje na žiadny odkaz.

Pseudolass Posledné dieťa

Používame Pseudolass Posledné dieťa:

Smartfóny

Tablety

Selector A: Posledné dieťa určuje štýl pre referencie, ktoré sú poslednými dcérskymi prvkami.

V prvom bloku je len posledná dcérska spoločnosť odkaz. Ale v druhom poslednom detskom prvku je odsek, takže v druhom bloku sa štýl nevzťahuje na žiadny z odkazov.

Jediný výbežník detí

Volič: iba-dieťa Vyberie prvky, ktoré sú jedinými dcérskymi prvkami v kontajneroch:

Titul

Odseky s textami "Text1" a "Text4" sú jediným detským prvkom vo svojich externých kontajneroch, takže štýl sa aplikuje na nich - červené písmo.

Len pseudo-trieda-typu

Len typu pseudo-triedy vyberie prvku, ktorý je jediným prvkom konkrétneho typu v nádobe. Napríklad jediný DIV prvok, s prvkami iných typov v tej istej nádobe, môže byť rovnako ako vy.

Solesový odsek a spin prvok

Hoci štýl je definovaný pre DIV prvky, nebude sa aplikovať, pretože kontajner tela obsahuje dva prvky DIV, a nie jeden. Ale v tele je len jeden prvok p, takže dostane štylizáciu. A tiež v kontajneri p existuje len jeden prvok rozpätia, takže bude tiež štylizovaný.

Trieda pseudo nTH-dieťaťa

Trieda Pseudo NTH-DETHO DETSKOU POTREBUJÚCEHO POTREBUJE SYSTÉMU Styľa

Napríklad štylizované aj a nepárne riadky:

Smartfóny

Odtrhnúť sa	Galaxy S7 hrana	60000
Jablko	iPhone SE	39000
Microsoft.	Lunia 650.	13500
Alcatel.	Idol S4.	30000
Huawei.	P9	60000
Htc	HTC 10.	50000
Meizu.	Pro 6.	40000
Xiaomi.	MI5.	35000

Ak chcete určiť štýl pre nepárne položky, selektor sa prenáša do "nepárnych":

TR: nth-dieťa (nepárne) ()

Dokonca aj prvky v voliči sa prenáša hodnota "dokonca":

Tr: NTH-Dieťa (dokonca) ()

Aj v tomto voliči môžeme preniesť počet štylizovaných prvkov:

TR: nth-dieťa (3) (na pozadí - farba: #bbb;)

V tomto prípade je tretí riadok štylizovaný.

Ďalšou príležitosťou je použitie náhrady za číslo, ktoré je vyjadrené písmenom N:

TR: nth-dieťa (2N + 1) (na pozadí - farba: #bbb;)

Tu sa štýl aplikuje na každý druhý podvý reťazec.

Číslo pred n (v tomto prípade 2) predstavuje detský prvok, ktorý bude pridelený takto. Číslo, ktoré sa dodáva, po zobrazení znamienka plus, z ktorého je potrebné spustiť výber, to znamená, že +1 znamená, že musíte začať od prvého detského prvku.

V tomto prípade sa teda výber začína s prvým prvkom a nasledujúce sa uvoľní 2 x 1 + 1 \u003d 3. prvok, ďalej 2 x 2 + 1 \u003d 5. prvok a tak ďalej.

Napríklad, ak chceme prideliť každý tretí prvok, počnúc druhým, mohli by sme napísať:

TR: nth-dieťa (3N + 2) (na pozadí - farba: #bbb;)

Pseudo-CLASS: N-last-dieťa v podstate poskytuje rovnakú funkcionalitu, len odpočítavanie prvkov nie je od začiatku, ale od konca:

TR: nth-last-dieťa (2) (na pozadí - farba: #bbb; / * 2 riadok od konca, to znamená, že predposledné * /) TR: nth-posledné dieťa (2N + 1) (pozadia-farba : #eee; / * nepárne riadky, počnúc koncom * /)

Trieda pseudo nTH-typu

Pseudo-Trieda: NTH-of-Type vám umožňuje vybrať detský prvok určitého typu na konkrétnom čísle:

TR: NTH-of-Type (2) (Farba pozadia: #BBB;)

Podobne, nTH-last-of-type pseudo triedy funguje, len teraz odpočítavanie prvkov pochádza z konca:

TR: nTH-last-of-type (2N) (pozadia-farba: #bbb;)

Myslím, že mnohí viem kontextové selektory v CSS. Najčastejšie sa používajú, ale skúsený kameraman vedie dokonale dobre, že niekedy kontextové selektory robia určité problémy. Tento problém súvisí so skutočnosťou, že v štruktúre prvku môže existovať mnoho identických prvkov vložených v sebe. A je potrebné aplikovať štýl, ktorý nie je pre všetky vnorené prvky, ale len na priamy prvok priamo. Tu pre tento a použitý dcéra voliči v CSS.

Tak, že problém sa stáva zrozumiteľnejším, dajte nám malý príklad. Dovoľte nám to HTML kód:

A našou úlohou je len červená " Druhý odsek"Ak píšeme pomocou kontextového voliča:

Kontajner P (
Farba: červená;
}

Že sa staneme červeným oboma odsekmi, ktoré nepotrebujeme vôbec. Táto úloha je veľmi jednoducho vyriešená dcéra voliči v CSS:

Kontajner\u003e P (
Farba: červená;
}

Všetko, teraz sme sa stali červenou farbou " Druhý odsek". Keďže tento odsek je priamo dcérskou spoločnosťou .container. ALE " Prvý odsek"Je dcérskou spoločnosťou pre vnútornú výživnýTak, pod pôsobením výberu dieťaťa, nespadá.

Táto úloha je tak ľahko vyriešená, je tu však jeden obrovský mínus dcéra voliči v CSS - Nepracujú v prehliadačoch Internet Explorer.. Z tohto dôvodu je ich použitie extrémne nežiaduce. Ale ak sa niekde stretnete, teraz budete vedieť, čo tento typ voličov znamená a čo robí.

Hlavná úloha tohto voliča vyplýva z jeho názvu a spočíva v prístupe k detský prvok. Zobrazí sa pomocou elementárneho znaku "\u003e", ktorá viaže detský prvok s rodičovským prvkom. Stojí tiež za zmienku, že v obehu sa používajú jednoduché selektory. Ako príklad zvážte nasledujúce kódovanie:

Prvok\u003e UL (polstrovanie - top: 20px;)

Toto kódovanie znamená, že na zoznam, ktorý je investovaný do prvku, použije sa táto kódovacia zarážka 20 pixelov z horného okraja. Prítomnosť v tejto vstupnej ikonu "\u003e" ukazuje, že pravidlo sa vzťahuje len na zoznamy prvej úrovne hniezdenia.

Podrobná analýza prepojenia práce dieťaťa

Výber prvku dieťaťa má podobné vlastnosti s koncepciou selektora potomkov. Existuje však charakteristický znak, ktorý ukazuje hlavný rozdiel medzi týmito operáciami. Leží v skutočnosti, že účinok selektora potomkov sa rozprestiera na absolútne všetky prvky, zatiaľ čo volič dieťaťa podriaďuje štýly pozície prvej úrovne klasifikácií.

Zvyčajne si uvedomuje, že práca dcérskeho prevádzkovateľa pomôže nasledujúci príklad:

Div\u003e R (Farba: # FF0000; / * červená * /)

< div> Tento reťazec bude mať predvolený čierny text.< span> Tento riadok je prelakovaný v červenej farbe kvôli tomu, že p je dcérska značka pre DIVA. < p> Opäť vidíme čierne písmená.< span> Tu vidíme aj čierne znaky, pretože pre túto rozpätie je rodič tag.

Tento príklad potvrdzuje prácu dcérskeho prevádzkovateľa podľa stupňa hniezdenia.

Obmedzenie uplatňovania doplnkového prevádzkovateľa

Stojí za zmienku, že táto operácia je podporovaná všetkými prehliadačmi inými ako legendárny program Internet Explorer 6. Myslím, že tam je málo ľudí pomocou tohto prehliadača, ale ak sú takéto UNICUMES k dispozícii, potom pre nich existuje cesta z situácie, ktorá bude byť opísaný v samostatnom článku.

Prečo platiť

Programátori odkazujú na selektory detských prvkov v prípadoch, keď potrebujete priradiť svoj jedinečný štýl s vnorenými prvkami. Používanie tohto voliča môže tiež znížiť objem CSS, ktorý zvýši čitateľnosť dokumentu. Ako ukazuje prax, táto operácia je najčastejšie označovaná pri vytváraní rozbaľovacích ponúk.

Selector pre detský prvok sa používa aj na priradenie jedinečných štýlov na prvky, ktorých rodičia sú už známe. Inými slovami:

Hlavná hlavička ( / * Registrácia sa vzťahuje len na hlavný heter * / }

Tento príklad je spravodlivý v prípadoch, keď sa na zvýraznenie názvov článkov použije štítok hlavičky. V našom prípade sa pýtame dizajnu len hlavného hetraru a neublížime sekundárne. Táto technika sa tiež vyhýba používaniu rozšírenia identifikátorov, čo zase uľahčuje hmotnosť súboru CSS a robí z neho čitateľnejšie.

Zhrnutie

Preto môže byť dcérsky prevádzkovateľ aplikovať nielen pre návrh rozbaľovacích ponúk, ale aj pre malú optimalizáciu vášho internetového zdroja na prácu roboty.