Když seskupujete selektory CSS, použijete stejné styly na několik různých prvků, aniž byste opakovali styly v šabloně stylů. Místo toho, abyste měli dvě, tři nebo více pravidel CSS, která dělají stejnou věc (například nastavte barvu něčeho na červenou), použijete jediné pravidlo CSS, které provede stejnou věc. Tajemstvím této taktiky zvyšující účinnost je čárka.
Jak seskupit selektory CSS
Chcete-li seskupit selektory CSS do šablony stylů, oddělte více seskupených selektorů čárkami ve stylu. V tomto příkladu styl ovlivňuje prvky p a div:
div, p {color: # f00; }
V této souvislosti čárka znamená „a“, takže tento selektor platí pro všechny odstavcové prvky a všechny prvky dělení. Pokud by čárka chyběla, selektor by se místo toho použil na všechny odstavcové prvky, které jsou podřízeným prvkem dělení. To je jiný druh selektoru, takže čárka je důležitá.
Můžete seskupit jakoukoli formu selektoru s jakýmkoli jiným selektorem. Tento příklad seskupuje selektor třídy s voličem ID:
p.red, #sub {barva: # f00; }
Tento styl se vztahuje na jakýkoli odstavec s atributem třídy Červené a jakýkoli prvek (protože druh není uveden) s atributem ID sub.
Můžete seskupit libovolný počet selektorů, včetně selektorů, kterými jsou jednotlivá slova a složené selektory. Tento příklad obsahuje čtyři různé selektory:
p, .red, #sub, div a: link {color: # f00; }
Toto pravidlo CSS by se vztahovalo na:
- Libovolný prvek odstavce
- Libovolný prvek třídy Červené
- Libovolný prvek s ID sub
- The odkaz pseudo třída kotevních prvků, které jsou potomky divize.
Ten poslední selektor je složený selektor. Jak je znázorněno, lze jej snadno kombinovat s ostatními selektory v tomto pravidle CSS. Pravidlo nastavuje barvu # f00 (červená) na těchto čtyřech selektorech, což je výhodnější než psaní čtyř samostatných selektorů, aby se dosáhlo stejného výsledku.
Lze seskupit jakýkoli selektor
Můžete umístit jakýkoli platný selektor do skupiny a všechny prvky v dokumentu, které odpovídají všem seskupeným prvkům, budou mít stejný styl založený na této vlastnosti stylu.
Někteří návrháři dávají přednost seznamu seskupené prvky na samostatných řádcích kvůli čitelnosti v kódu. Vzhled na webu a rychlost načítání zůstávají stejné. Můžete například kombinovat styly oddělené čárkami do jedné vlastnosti stylu v jednom řádku kódu:
th, td, p.red, div # firstred {barva: červená; }
nebo můžete pro přehlednost uvést styly na jednotlivých řádcích:
th,
td,
str. červená,
div # firstred
{
červená barva;
}
Proč seskupovat selektory CSS?
Seskupení selektorů CSS pomáhá minimalizovat velikost šablony stylů, aby se načítala rychleji. Je pravda, že šablony stylů nejsou hlavními viníky pomalého načítání; Soubory CSS jsou textové soubory, takže i velmi dlouhé listy CSS jsou ve srovnání s neoptimalizovanými obrázky malé. Přesto pomáhá každá optimalizace, a pokud můžete z CSS oholit určitou velikost a načítat stránky mnohem rychleji, je to dobrá věc.
Seskupování voličů také výrazně usnadňuje údržbu webu. Pokud potřebujete provést změnu, můžete jednoduše upravit jedno pravidlo CSS namísto více. Tento přístup šetří čas a potíže.
Sečteno a podtrženo: Seskupování selektorů CSS zvyšuje efektivitu, produktivitu, organizaci a v některých případech dokonce rychlost načítání.