CSS selektory. druhy selektorů

, z nichž každá chcete nastavit určitou barvu. Jak na to? Standardní CSS selektory nejsou vhodné pro značky, které označují parametry pro všechny bloky najednou. Řešení je jednoduché. Přiřadit členy třídy. Například, první získal div class = 'červené', druhá - class = 'modrá', třetí - class = 'green'. Nyní mohou být vybrány pomocí CSS tabulky.

Syntaxe je následující: Označuje bod ( „“), následovaný psát název třídy. Chcete-li spravovat první jednotku, použijte konstrukci .red. Za druhé - .blue a tak dále.

Důležité! Doporučuje se používat smysluplné hodnoty atributu class. 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ší volbou - používat jakékoliv metody, jako je MHP.

Výhody - relativně vysoká flexibilita.

Nevýhody - se více prvků, může být jeden a ten samý třídy, což znamená, že se bude upravovat současně. Problém je řešen použitím metodologie, stejně jako dědictví preprocesorů. Ujistěte se, že dostat své ruce méně, Sass nebo nějaký jiný preprocessor, které výrazně zjednoduší práci.

volič ID

O této verzi mínění kodéry a programátoři jsou nejednoznačné. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Některé CSS tutoriály nedoporučují používání ID, protože nepřesné žádosti mohou způsobit problémy s dědictvím. Nicméně, mnozí odborníci jsou aktivně uspořádat je v celém půdorysu. Vy rozhodujete. # »), затем имя блока. Syntaxe je následující: znak libry ( „#“), pak název bloku. #red. Například #red.

отличается от класса по нескольким параметрам. ID se liší od třídy v několika ohledech. ID. Za prvé, strana nemůže být dva identické ID. Jsou přiřazeny jedinečný název. Za druhé, jako selektor má vyšší prioritu. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. To znamená, že pokud zadáte třídu jednotky červené a určit v CSS tabulkách červenou barvu pozadí, a přiřadit k němu stejným ID modré a určit barvu modrou, přístroj se zbarví do modra.

Výhody - můžete ovládat konkrétní prvek, ignoruje styly tagů a tříd.

ID и class. Nevýhody - snadné se ztratit ve velkém počtu ID a třídy.

Důležité! ID вам, в общем-то, не нужны. Pokud používáte metodiky BEM (nebo jeho analog), ID k vám, obecně nejsou potřeba. Tato technika zahrnuje použití rozložení unikátních tříd, které mnohem pohodlnější.

univerzální selektor

{}. Syntaxe: hvězdičkou značka ( "*"), a rovnátka, tedy {*} ...

Používá pro přiřazení určité atributy jednou všechny prvky stránky. Když to může být užitečné? box-sizing: border-box. Například pokud chcete nastavit na stránce vlastností box-sizing: border-box. div *{}. Nemohou být použity pouze k řízení všechny složky dokumentu, ale také ke kontrole všechny děti zadaného bloku, například div * {}.

Výhody - můžete ovládat velký počet položek najednou.

Nevýhody - není dostatečně flexibilní možnost. Kromě toho, použití tohoto voliče, v některých případech zpomalit stránky práce.

srovnáváním

Aby bylo možné ovládat prvek s konkrétním atributem. Například, máte několik vstupních tagů s jiným typem atributu. Jeden z nich - text, druhý - heslo, třetí - počet. Samozřejmě, můžete nastavit každou třídu nebo ID, ale to není vždy pohodlné. CSS selektory atributů, aby bylo možné určit hodnoty pro některé značky s maximální přesností. Například takto:

vstup [type = 'Text'] {}

Tento volič vybere všechny atributy s typem vstupního textu.

Tento nástroj je velmi flexibilní a může být použit s některou z tagů, ve kterých mohou být atributy. Ale to není všechno! Specifikace CSS má schopnost kontrolovat prvky s ještě větší pohodlí!

Představte si, že vaše stránka má vstup s atributem zástupný symbol = „Zadejte název“ a vstupní symbol = „Zadejte heslo“. Mohou být také vybírány na základě voliče! Chcete-li to provést, použijte následující strukturu:

vstup [symbol = "Enter název"] {} nebo vstup [symbol = "Zadat heslo"]

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

[Název * = "Kaspijsk"]

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

Můžete si také vybrat značky, které začínají s atributy určitý znak:

[Název ^ = "znak, který chcete"] {}

nebo ukončit jim:

[$ Title = "vpravo znak"] {}.

Výhody - maximální flexibilitu. Můžete si vybrat všechny existující prvky stránky, aniž by probírat s třídami.

Nevýhody - použité poměrně zřídka, pouze ve zvláštních případech. Mnoho webové designéry raději metodiky, protože třída bod je jednodušší, než uspořádat řadu hranaté závorky a znaky „rovné“. Navíc, tyto voliče nefungují v aplikaci Internet Explorer verze 7 a pod. Nicméně, kteří jsou nyní potřebujeme starý Internet Explorer?

pseudo-třídy selektory

Označuje pseudo-status elementu. Například ,: visu - co se stane s části stránky, když podržíte ,: navštívil - navštívenou odkaz. To také zahrnuje prvky, jako jsou: první dítě a posledního dítětem.

Tento typ voliče je aktivně používá v moderním dispozičním řešením, protože díky ní si můžete udělat stránku „živý“ bez použití JavaScriptu. Například chcete, aby se ujistil, že když najedete tlačítkem s třídou btn jeho barva změnila. Chcete-li to, budeme používat následující strukturu:

.btn: hover {

background-color: red;

}

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.

Ctnosti - jsou široce používány pro „oživení“ stránek. Snadné použití.

Nevýhody - nejsou. To je opravdu šikovný nástroj. Nicméně, nezkušené webové designéry může ztratit v hojnosti pseudotříd. Problém je vyřešen studium a praxi.

pseudo-selektory

„Pseudo“ - jedná se o části stránky, které nejsou v HTML, ale přesto mohou být řízeny. Jste nerozuměli? Je to mnohem jednodušší, než se zdá. Například chcete, aby první písmeno v řetězci velké a červené, takže druhý malý a černý text. Samozřejmě, lze dojít k závěru, že dopis v rozpětí s určitou třídou, ale je to dlouhá a nudná. Je to mnohem jednodušší vybrat celý odstavec a použít pseudo :: first-letter. To dává možnost ovládat vzhled prvního dopisu.

Existuje poměrně velké množství pseudo-prvků. Seznam je do jednoho článku nemá naději na úspěch. Můžete najít relevantní informace ve vašem oblíbeném vyhledávači.

Výhody - poskytují flexibilitu umožňující přizpůsobit vzhled stránky.

Nevýhody - nové pro ně jsou často zaměňovány. Mnoho výběry tento typ práce pouze v některých prohlížečích.

Abychom to shrnuli

Volič - výkonný nástroj pro řízení toku dokumentů. Díky němu si můžete vybrat každý jednotlivý komponent stránky (tam jsou i jen částečně). Ujistěte se, že naučit se všechny dostupné možnosti, nebo dokonce je zapsat. To je zvláště důležité, pokud si vytvářet složité stránky s moderním designem a spoustou interaktivních prvků.