Naučte se, jaký výběr CSS

Začátek CSS

CSS se spoléhá na pravidla pro porovnávání vzoru pro určení, který styl se vztahuje k prvku v dokumentu. Tyto vzory se nazývají voliče a pohybují se od názvů značek (například p, které odpovídají odstavcům) až po velmi složité vzory, které odpovídají velmi specifickým částem dokumentu (např. P # myid> b.highlight by odpovídal jakémukoli tagu b třída zvýraznění, která je podřízeným odstavcem s id myid).

Volič CSS je součástí volání ve stylu CSS, které určuje, jaká část webové stránky by měla být stylizovaná. Volič obsahuje jednu nebo více vlastností, které určují, jak bude vybraný HTML stylizovaný.

Výběr CSS

Existuje několik různých typů voličů:

• voliče typu - odpovídající určitému prvku
• třídních selektorů - odpovídajících prvků s určitou třídou
• Volič ID - odpovídající prvku se specifickým ID
• potomčí selektory - maticové prvky, které jsou potomky určitého prvku
• podřízené prvky selektorů, které jsou podřízené danému prvku
• univerzální selektory - odpovídající libovolnému prvku
• sousední selektory sourozence - odpovídající prvky, které bezprostředně předchází určitý prvek
• atributy selektorů odpovídajících určitému atributu nebo hodnotě atributu
• pseudotřídní selektory s odpovídajícími prvky se specifickou pseudo-třídou
• pseudo-element selektory - odpovídající prvky se specifickými vlastnostmi pseudo-prvků

Formátovat styly CSS a výběry CSS

Formát stylu CSS vypadá takto:

selektor {vlastnost stylu: styl; }}

Oddělte více výběrů, které mají stejný styl s čárkami. Toto se nazývá seskupení voličů. Například:

selector1 , selector2 {vlastnost stylu: styl; }}

Seskupení výběrových prvků je stručnostní mechanismus, který udržuje vaše styly CSS kompaktní.

Výše uvedené seskupení by mělo stejný účinek jako:

selector1 {vlastnost stylu: styl; }}
selector2 {vlastnost stylu: styl; }}

Vždy vyzkoušejte voliče CSS

Ne všechny prohlížeče podporují všechny voliče CSS. Ujistěte se tedy, že vyzkoušíte své selektory v co nejvíce prohlížečích na co nejvíce operačních systémech. Ale pokud používáte voliče CSS 1 nebo CSS2, měli byste být v pořádku.