Dobrý den, milí čtenáři! Pokračování předmětu CSS Selecists vám chci nabídnout popis dceřiných společností a kontextových selektorů, stejně jako jejich srovnávací analýza, protože podle logiky aplikace jsou velmi podobné, i když mají nějaký rozdíl.

V mých publikacích jsem zůstal podrobně v různých typech selektorů CSS:; jakož i . Mimochodem, v posledním článku, kde různé typy voliče atributu demontujel, jsem podrobně popsal podrobně, jak mohou být mé teoretické výpočty okamžitě zkontrolovány provedením změn HTML a CSS kódu online pomocí vestavěného Google Chrome () nářadí. Tyto nástroje pro úpravy mají nejnovější úpravy všech populárních prohlížečů, včetně Firebug pluginu pro Firefox ().

Teoretický materiál tohoto příspěvku může být také studován tím, že vytvoříte úpravu jakékoli stránky jakékoli stránky! Chcete-li to provést, stiskněte klávesu F12, pokud používáte Google Chrome nebo Mozilla Firefox (). A teď představím obsah pagu P, na jejichž příkladu budeme studovat subjekt a kontextové css selektory:

Tento odstavec zahrnuje eM a silné formátování tagypřidělit text tlustý a italský.

Použití výše popsaného editačního nástroje, vložil jsem tento odstavec přímo k tomuto článku, což představil odpovídající text na levé straně okna pro úpravu, v důsledku čehož text tohoto odstavce se objevil v horní části stránky:

Tento design HTML ,. Tento odstavec bude experimentální v dnešní publikaci, na jeho příkladu uvedu, jak se design jeho textu mění, v závislosti na tom, které selektory - dítě nebo kontextové - jsou používány v pravidle CSS.

Dcera se nazývá prvek, který se nachází přímo uvnitř rodiče. Před zahájením přímo na toto téma poskytnu obrázek, který odráží hierarchii značky v dokumentu HTML na příkladu odstavce, jehož text je uveden výše a které dnes budeme rozebrat:

Tento design se také nazývá strom prvků. Na tomto obrázku je vnořovací kontejnery jasně zastoupeny, což znamená hierarchické vztahy mezi značkami. Odstavec P PAG je dceřiným prvkem ve vztahu. Silná značka zároveň není dceřinou společností pro DIV, protože je závodí v kontejneru P.

Dceřiná společnost CSS Selector.

Selektor dítěte ve stromu prvků je vždy přímo uvnitř nadřazeného prvku, v tomto případě bude syntaxe voliče Syntaxe CSS následující:

Styl bude aplikován na volič 2, ale pouze v případě, že je to dítě pro volič 1. Budeme analyzovat podrobněji pomocí výše uvedené screenshot se stromem prvků. Například podle syntaxe můžete toto pravidlo nastavit:

P\u003e em (barva: zelená;)

Toto pravidlo ovlivní poslední slovo odstavec "kurzívou" kurzívou ", neboť je uzavřen mezi otevíráním a zavíráním značek EM. EM TAG je dceřinou společností pro P, protože je umístěna přímo uvnitř, proto bude text obsahu, a to slovo "kurzíva" bude namalován v zelené.

Ostatní Em značka však neslouží jako přímý potomek značky P, protože je součástí silné značky, v důsledku této části odstavce "Formátování tagů EM a silné" nebudou namalovány.

Kontextový volič CSS.

Je to fronta, kterou chcete zjistit jaký je kontextový volič CSS. Při výkladu jedné nebo jiné stránky stránky velmi často jsou značky investovány do druhého do druhého. Aby styly pro takové prvky fungovaly správně, se používají selektory, které působí v určitém kontextu, tedy název.

Pokud aby bylo možné použít pravidlo CSS, musí být dětský volič umístěn přímo uvnitř nadřazeného prvku (první úroveň hnízdění), pak pro volič kontextu je zcela nedůležité a jakákoliv úroveň hnízdění lze použít, všechny Rovné vlastnosti prvku budou přeneseny z rodiče. Současně je syntaxe:

Jak vidíte, kontextový volič se skládá z jednoduchých selektorů oddělených mezerou. Pro kontextové selektory je dovoleno používat dva a více značky investované do sebe. Nyní provádíme pravidlo CSS pro testovací odstavec, který jsem vedl výše:

P EM (barva: zelená;)

Jak můžete vidět, zelená je zbarvena nejen z textu obsahu odstavce, který je přímo uzavřen ve formátovací značce EM, tj. Slovo "kurzívou", ale také text textu jiného EM značky, který Také zahrnuje silnou značku. Stalo se to proto, že platí pravidlo s kontextovým voličem, pro který není na rozdíl od dceřiné společnosti důležitá úroveň vnoření. Jedná se o hlavní rozdíl mezi dceřinou společností a kontextovým voličem.

Zvažte další příklad interakce kontextu a dětských selektorů s naším odstavcem. Propsding další pravidla CSS pro dceřiné a kontextový volič:

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

Poté náš odstavec získává takový design:

Jak vidíte, kus textu uzavřený v EM a silných značkách je malován červeně, protože je spravedlivé na kontextové voličové pravidlo, to znamená, že EM značka je uzavřena v silných a DIV kontejnerech a úrovni vnoření , jak již bylo zaznamenáno, nezáleží na tom.

Vyvstává otázka: proč je slovo "kurzíva", což je také obsah em, namalovaný zeleně? Koneckonců a pro něj je relevantní kontextové pravidlo voliče. Ale pro tuto část znění odstavce je pravidlo selektoru dceřiny také pravdivé, protože není v rozporu s podmínkou, že pro volič dítěte by měl prvek přímo zadat značku P.

Skutečnost je, CSS má prioritní právo pro vlastnosti CSS níže. To znamená, že pravidlo selektoru dceřiní je v dokumentu níže než styly CSS předepsané pro kontextový volič kontejneru DIV. Proto se slovo "kurzíva" stalo zelené. Pokud je změníte na některých místech, pravidlo "p\u003e em (barva: zelená;)" přestává jednat a text textu "kurzívou" bude červeno.

Popis

Pseudo-Class: Nth-Dítě slouží k přidávání stylu do prvků založených na prvcích stromu.

Syntax

prvek: Nth-Dítě (liché | Dokonce<число> | <выражение>) {...}

Hodnoty

Liché všechny liché prvky čísla. Dokonce i všechny i \u200b\u200bpočty prvků. Počet pořadového čísla podřízeného prvku vzhledem k jeho rodiči. Číslování začíná 1, bude to první prvek v seznamu. Výraz je nastaven ve formě A + B, kde A a B celá čísla a n - čítač, který automaticky vyžaduje hodnotu 0, 1, 2 ...

Pokud A je nula, není napsáno a záznam se sníží na b. Pokud B je nula, není také specifikováno a výraz je napsán ve formě. A a B mohou být záporná čísla, v tomto případě značka plus se změní na mínus, například: 5N-1.

Vzhledem k použití negativních hodnot A a B mohou být některé výsledky také negativní nebo rovny nule. Nicméně, pouze pozitivní hodnoty ovlivňují prvky v důsledku skutečnosti, že číslování prvků začíná 1.

V záložce. 1 ukazuje některé možné výrazy a klíčová slova, a také specifikovala, která čísla prvků budou zapojeny.

Html5 css3 tj cr op sa fx

	2134	2135	2136	2137	2138
Olej	16	34	62	74	57
Zlato	4	69	72	56	47
Dřevo	7	73	79	34	86
Kameny	23	34	88	53	103

V tomto příkladu se pseudo-class: nth-dítě používá ke změně stylu prvního řádku tabulky, stejně jako zvýraznit barvu všech rovných řádků (obr. 1).

Poslední aktualizace: 04/21/2016

Zvláštní skupina pseudoklasů tvoří pseudoklasy, které vám umožní vybrat si určité podřízené prvky:

: První dítě: představuje prvek, který je prvním podřízeným prvkem

: Poslední dítě: představuje položku, která je posledním podřízeným prvkem

: pouze dítě: představuje prvek, který je jedinou dceřinou společností v určitém kontejneru

: Pouze typu: Vybere položku, která je jediným prvkem určitého typu (tagu) v určitém kontejneru

: Nth-Dítě (n): představuje dětský prvek, který má specifické n číslo, například druhý dětský prvek

: Ntt-last-dítě (n): představuje dětský prvek, který má specifické n číslo, počínaje koncem

: Ntt-of-type (n): Vybere určitý typ dětského prvku, který má konkrétní číslo

: Nth-last-type (n): Vybere dětský prvek určitého typu, který má konkrétní číslo od konce

Pseudo třídy první dítě

Používáme první dítě Pseudoclaslu, abychom vybrali první odkazy v blokech:

Tablety

Smartphone.

Styl voliče A: První dítě platí pro odkaz, pokud se jedná o první podřízený prvek jakéhokoliv prvku.

A ve druhém bloku je první prvek odstavec, takže styl se nevztahuje na žádný odkaz.

Pseudolass Last-Dítě

Používáme Pseudolass Last-Dítě:

Smartphone.

Tablety

Volič A: Poslední dítě určuje styl pro odkazy, které jsou prvky posledních dceřiných prvků.

V prvním bloku je jen poslední dceřiná společnost odkaz. Ale ve druhém posledním podřízeném prvku je odstavec, takže ve druhém bloku se styl nevztahuje na některou z odkazů.

Pouze-dětský volič

Volič: Pouze-dítě vybere prvky, které jsou jediné dceřiné prvky v kontejnerech:

Titul

Odstavce s texty "text1" a "text4" jsou jediné podřízené prvky v jejich vnějších kontejnerech, takže styl je aplikován na ně - červené písmo.

Pouze typu pseudo-třídy

Pouze typ třídy Pseudo-of typ vybere prvek, který je jediným prvkem určitého typu v kontejneru. Jediný DIV element, s prvky jiných typů ve stejné nádobě, může být například stejně jako ty.

Jediný odstavec a spředenský prvek

I když je styl definován pro DIV elementy, nebude použito, protože nádoba na tělo obsahuje dva DIV elementy, a ne jeden. Ale v těle je pouze jeden prvek p, takže obdrží stylizaci. A také v kontejneru p je pouze jeden prvek rozpětí, takže bude také stylizovaný.

Třída pseudo ntt-dítě

Třída Nth-Dětská pseudo umožňuje stylizovat každou sekundu, třetí prvek, pouze i jen podivné položky atd.

Například stylizujte i řádky tabulek:

Smartphone.

Samsung.	Galaxy S7 EDGE.	60000
Jablko	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

Pro určení stylu pro liché položky je volič přenášen na "lichý":

Tr: ntt-dítě (lichý) ()

Pro stylování rovnoměrných prvků ve voliči je přenášena hodnota "Dokonce"

Tr: ntt-dítě (ani) ()

Také v tomto voliči můžeme přenést počet stylizovaného prvku:

Tr: ntt-dítě (3) (barva pozadí: #bbb;)

V tomto případě je třetí řádek stylizovaný.

Další příležitostí je použití náhrady za číslo, které je vyjádřeno písmenem N:

Tr: ntt-dítě (2n + 1) (barva pozadí: #bbb;)

Zde se styl aplikuje na každý druhý podivný řetězec.

Číslo před n (v tomto případě 2) představuje dětský prvek, který bude přidělen následovně. Číslo, po které se přichází po znaménku plus, ze kterého je třeba spustit výběr, to znamená, že +1 znamená, že potřebujete začít od prvního podřízeného prvku.

V tomto případě tedy výběr začíná prvním prvkem, a následující je uvolněn 2 * 1 + 1 \u003d 3. prvek, dále 2 * 2 + 1 \u003d 5. prvek a tak dále.

Například, pokud chceme přidělit každý třetí prvek, počínaje druhou, mohli bychom psát:

Tr: ntt-dítě (3n + 2) (barva pozadí: #bbb;)

Pseudo-třída: nth-last-dítě v podstatě poskytuje stejnou funkčnost, pouze odpočítávání prvků není od začátku, ale od konce:

Tr: nth-last-dítě (2) (barva pozadí: #bbb; / * 2 řádek od konce, to znamená předposlední * /) tr: ntt-last-dítě (2N + 1) (barva pozadí : #eee; / * liché čáry, počínaje koncem * /)

NTT-typ pseudo třídy

Pseudo-Class: Nth-of-typu umožňuje vybrat podřízený prvek určitého typu na konkrétním čísle:

Tr: ntt-of-type (2) (barva pozadí: #bbb;)

Podobně, netr-last-type pseudo třída funguje, teprve nyní odpočítávání prvků pochází z konce:

Tr: nth-last-type (2N) (barva pozadí: #bbb;)

Myslím, že mnoho ví kontextové selektory v CSS. Používají se nejčastěji, nicméně, zkušení kameramena znají dokonale dobře, že někdy kontextové selektory provádějí určité problémy. Tento problém se týká skutečnosti, že ve struktuře prvku může být mnoho identických prvků vložených v sobě. A je nutné použít styl ne pro všechny vnořené prvky, ale pouze do přímého prvku přímo. Zde pro to a používáno dcera selektory v CSS.

Takže problém se stává srozumitelnější, uveďte malý příklad. Mějme takové HTML kód:

A naším úkolem je učinit pouze červené " Druhý pododstavec"Pokud píšeme pomocí voliče kontextu:

Kontejner p (
Červená barva;
}

Že se staneme červenou obou odstavců, které nepotřebujeme vůbec. Tento úkol je velmi jednoduše vyřešen dcera selektory v CSS:

Kontejner\u003e p (
Červená barva;
}

Všechno, teď jsme jen červené " Druhý pododstavec". Od tohoto odstavce je přímo dceřiná společnost .kontejner. ALE " První odstavec"Je dceřiná společnost pro interní divákTakže pod akcím voliče dítěte nespadá.

Tento úkol je tak snadno vyřešen, nicméně, tam je jeden obrovský mínus dcera selektory v CSS - Nepracují v prohlížečích Internet Explorer.. Z tohoto důvodu je jejich použití extrémně nežádoucí. Ale pokud se najednou setkáte někde, teď budete vědět, co tento typ selektorů znamená a co to dělá.

Hlavním úkolem tohoto voliče následuje z jeho názvu a spočívá v přístupu k podřízenému prvku. Zobrazí se pomocí elementární znaménko "\u003e", která váže dětský prvek s rodičovským prvkem. Stojí také za zmínku, že jednoduché selektory se používají v oběhu. Jako příklad zvažte následující kódování:

Prvek\u003e UL (Padding- top: 20px;)

Toto kódování znamená, že interní odrážka 20 pixelů z horního okraje bude aplikována na seznam, který je investován do prvku. Přítomnost v této vstupní ikonu "\u003e" ukazuje, že pravidlo platí pouze pro seznamy první úrovně hnízdění.

Podrobná analýza pracovního voliče dětského prvku

Volič prvku dítěte má podobné vlastnosti s konceptem sestavy potomku. Existuje však charakteristická funkce, která ukazuje hlavní rozdíl mezi těmito operacemi. Leží v tom, že účinek voliče potomku se rozprostírá na absolutně všechny prvky, zatímco dětský volič podřízen styly pozice první úrovně klasifikací.

Zřetelnější oceňování práce dceřiného operátora pomůže následujícím příkladu:

Div\u003e r (barva: # ff0000; / * červená * /)

< div> Tento řetězec bude mít výchozí černý text.< span> Tato linka je překreslena červeně kvůli skutečnosti, že p je dcera značka pro divu. < p> Opět vidíme černá písmena.< span> Zde vidíme také černé znaky, protože pro tento rozpětí je rodič označení.

Tento příklad potvrzuje práci dceřiného operátora podle stupně hnízdění.

Omezení uplatňování dceřiného operátora

Stojí za zmínku, že tato operace je podpořena všemi prohlížeči jinými než legendární prohlížeče. být popsán v samostatném článku.

Proč platit

Programátoři odkazují na selektory dětských prvků v případech, kdy potřebujete přiřadit svůj jedinečný styl s vnořenými prvky. Použití tohoto voliče může také snížit objem CSS, což zvýší čitelnost dokumentu. Jako praxe ukazuje, tato operace je nejčastěji označována při vytváření rozevírací nabídky.

Dětský prvek volič je také používán k přiřazení jedinečných stylů prvků, jejichž rodiče jsou již známy dříve. Jinými slovy:

Hlavní\u003e záhlaví ( / * Registrace se vztahuje pouze na hlavní heter * / }

Tento příklad je spravedlivý v případech, kdy se značka záhlaví používá pro zvýraznění titulů článků. V našem případě se ptáme navrhování pouze hlavní heter a nebolí sekundární. Tato technika se také vyhýbá použití identifikátorů rozšíření, což zase usnadňuje hmotnost souboru CSS a činí je čitelnější.

Sčítání

Dceřiný operátor tedy lze použít nejen pro návrh rozevírací nabídky, ale také pro malou optimalizaci vašeho internetového zdroje pro práci vyhledávacích robotů.