CSS Selectors. Typy selektorů

Jazyk pro popis vzhledu dokumentu CSS se neustále vyvíjí. Časem se zvyšuje nejen výkonnost a funkčnost, ale také flexibilita a snadné používání.

CSS selektory

Začněme to pochopit. Otevřete libovolný tutoriál CSS, alespoň jedna sekce se zaměří na typy výběru. To není překvapující, protože jsou jedním z nejvhodnějších způsobů, jak spravovat obsah stránky. S jejich pomocí můžete komunikovat s absolutně všemi prvky HTML. Nyní existuje 7 typů voličů:

• pro tag-
• pro třídy;
• pro ID;
• univerzální;
• atributy;
• pro interakci s pseudotřídami;
• k ovládání pseudo-prvků.

Syntaxe je jednoduchá. Naučte se používat Voliče CSS, prostě si o nich přečtěte. Která možnost je lepší zvolit kontrolu obsahu ve vašem případě? Pokusíme se pochopit.

Volič značek

Jedná se o nejjednodušší volbu, která nevyžaduje speciální znalosti pro psaní. Chcete-li spravovat značky, musíte použít jejich jméno. Předpokládejme, že "uzávěr" vašeho webu je zabalen do tagu

Výhody - snadné použití, všestrannost.

Nevýhody - úplný nedostatek flexibility. Ve výše uvedeném příkladu budou všechny záhlaví označeny současně. A co když potřebujete spravovat pouze jednu?

Výběr tříd

Nejběžnější možnost. Je určen pro správu značek s třídou atributů. Předpokládejme, že váš kód má tři bloky

Syntaxe je tato: určete bod ("."), Po kterém napíšeme název třídy. Chcete-li spravovat první blok, použijte návrh .red. Druhým je modrý a tak dále.

Důležité! Doporučuje se, abyste pro atribut třídy použili jasné hodnoty. To je považováno za špatnou formu používat přepis (např krasiviy-BLOK) nebo náhodné kombinace písmen / čísel (ojfh834871). V tomto kódu, jste povinni se zmást, nemluvě o potíže, které se potýkají ti, kteří budou zapojeni do projektu po vás. Nejlepší možností je použít nějakou metodiku, jako je BEM.

Výhodou je poměrně vysoká flexibilita.

Nevýhody - některé prvky mohou mít stejnou třídu, a proto budou editovány současně. Problém je řešen pomocí metodiky, stejně jako dědičnosti předprocesorů. Ujistěte se, že ovládáte méně, sass nebo nějaký jiný preprocesor, což značně zjednoduší práci.

Výběr podle ID

O této možnosti jsou názory kodera a programátorů nejednoznačné. Některé výukové programy CSS obecně nedoporučujeme používat ID, protože mohou způsobit problémy při dědění při neúmyslném použití. Mnoho specialistů je však aktivně distribuuje po celou dobu značkování. Záleží jen na vás. Syntaxe je: znak mřížky ("#"), Pak název bloku. Například, #red.

ID se liší od třídy několika parametry. Nejprve na stránce nesmí být dvě identické stránky ID. Jsou přidělena jedinečná jména. Za druhé, takový selektor má vyšší prioritu. To znamená, že pokud dáte bloku třídu červená a specifikujte v tabulkách CSS červená barva pozadí, a pak ho jmenovat id modrá a označte modrou barvu, blok se změní na modrou.

Výhody - můžete ovládat určitý prvek, nevěnujte pozornost stylům pro značky a třídy.

Nevýhody - je snadné se zmást ve velkém počtu ID a třídy.

Důležité! Pokud používáte metodiku BEM (nebo její analogie) ID které obecně nepotřebujete. Tato technika rozložení zahrnuje použití jedinečných tříd, což je mnohem pohodlnější.

Univerzální volič

Syntaxe: hvězdička ("*") a kudrnaté příchytky, tj.{}.

Používá se k přiřazení určitých atributů všem prvkům stránky najednou. Kdy může být užitečné? Chcete-li například nastavit vlastnost stránky velikost rámečku: rámeček. Může být použita nejen pro správu všech složek dokumentu, ale také pro řízení všech dětí určitého bloku, div * {}.

Výhody - můžete spravovat velké množství položek najednou.

Nevýhody nejsou flexibilní možností. Navíc použití tohoto voliče v některých případech zpomaluje stránku.

Podle atributů

Je možné ovládat prvek s určitým atributem. Například máte několik vstupních značek s atributem jiného typu. Jeden z nich je text, druhý je heslo, třetí je číslo. Samozřejmě můžete přiřadit každou třídu nebo ID, ale není to vždy výhodné. Voliče CSS podle atributů umožňují určit hodnoty pro určité značky s maximální přesností. Například takto:

vstup [type = rsquo-textrsquo -] {}

Tento výběr atributů vybere všechny typy textu.

Nástroj je poměrně flexibilní, může být použit s jakýmikoli tagy, které mohou mít atributy. Ale to není všechno! Ve specifikaci CSS je možné prvky spravovat i s velkým pohodlím!

Představte si, že vaše stránka má vstup s atributem placeholder = "Zadejte název" a vložte zástupný symbol = "Zadejte heslo". Mohou být také vybrány pomocí voliče! Pro tento účel se používá následující konstrukce:

vstup [placeholder = "Zadejte jméno"] {} nebo zadání [placeholder = "Zadejte heslo"]

Flexibilnější práce s atributy je možná. Řekněme, že máte celou řadu značek s podobnými atributy názvu (například „kaspické“ a „Caspian“). Chcete-li vybrat obě, použijte následující voliče:

[titul * = "kaspiysk"]

CSS vybere všechny položky v názvu, která tam jsou symboly „Kaspian“, tj. E., a „Kaspian“ a „Kaspian“.

Můžete také vybrat značky, jejichž atributy začínají určitými znaky:

[title ^ = "znak, který potřebujete"] {}

nebo skončit s nimi:

[title $ = "požadovaný znak"] {}.

Výhody - maximální flexibilita. Můžete si vybrat libovolné existující prvky stránky, aniž byste museli hovořit s třídami.

Nevýhody - používá se poměrně vzácně, pouze v konkrétních případech. Mnoho návrhářů návrhů dává přednost metodice, protože je snadnější zadat třídu než uspořádat více hranaté závorky a znamení jsou "rovnocenné". Navíc tyto voliče nefungují v aplikaci Internet Explorer verze 7 nebo nižší. Kdo však nyní potřebuje starý Internet Explorer?

Pseudotřídní selektory

Pseudotřída označuje stav prvku. Například: pohyb myši - co se stane s částí stránky, když se vznáší nad ,: navštívil - navštívil odkaz. Obsahuje také prvky jako: první dítě a poslední dítě.

Tento typ přepínačů se aktivně používá v moderním uspořádání, protože díky tomu můžete stránku "živě" bez použití jаvascriptu. Chcete-li to například udělat tak, že při přesunutí kurzoru nad tlačítko s třídou btn se změní jeho barva. K tomu použijeme následující konstrukci:

.btn: hover {

barva pozadí: červená-

}}

Krása může být specifikováno v základních vlastností tlačítka přechod majetku, například 0,5 s - v tomto případě je tlačítko nebude červenat okamžitě, a během půl vteřiny.

Výhody - aktivně se používají k "oživení" stránek. Snadné použití.

Nevýhody - nejsou. To je opravdu pohodlný nástroj. Nicméně, nezkušení redaktoři mohou být zmateni v množství pseudotříd. Problém je řešen studiem a praxí.

Výběr pseudo-prvků

"Pseudo-prvky" jsou ty části stránky, které nejsou v HTML, ale mohou být stále spravovány. Nechápal jste nic? Všechno je jednodušší, než se zdá. Například chcete učinit první písmeno v řádku velké a červené, přičemž druhý text ponecháte malý a černý. Samozřejmě můžete tento dopis uzavřít s určitou třídou, ale je to dlouhé a nudné. Je mnohem jednodušší vybrat celý odstavec a použít pseudo-prvok :: prvního písmena. Umožňuje vám ovládat vzhled prvního písmene.

Existuje poměrně velký počet pseudoelementů. Seznam těchto položek v rámci jednoho článku pravděpodobně nebude fungovat. Příslušné informace naleznete ve vašem oblíbeném vyhledávači.

Výhody - umožňují flexibilní přizpůsobení vzhledu stránky.

Nevýhody - začátečníci v nich jsou často zmateni. Mnoho selektorů tohoto typu pracuje pouze v určitých prohlížečích.

Shrňme

Volič je výkonným nástrojem pro řízení toku dokumentů. Díky němu si můžete vybrat absolutně všechny komponenty stránky (i stávající je pouze podmíněné). Ujistěte se, že jste se dozvěděli všechny dostupné možnosti nebo je alespoň zapsat. To je zvláště důležité, pokud vytvoříte složité stránky s moderním designem a množstvím interaktivních prvků.