Keď zoskupujete selektory CSS, použijete rovnaké štýly na niekoľko rôznych prvkov bez opakovania štýlov v šablóne so štýlmi. Namiesto toho, aby ste mali dve, tri alebo viac pravidiel CSS, ktoré robia to isté (napríklad nastavíte farbu niečoho na červenú), použijete jediné pravidlo CSS, ktoré umožní to isté. Tajomstvom tejto taktiky na zvýšenie účinnosti je čiarka.
Ako zoskupiť selektory CSS
Ak chcete zoskupiť selektory CSS do šablóny štýlov, na oddelenie viacerých zoskupených selektorov použite čiarky v štýle. V tomto príklade štýl ovplyvňuje prvky p a div:
div, p {farba: # f00; }
V tejto súvislosti čiarka znamená „a“, takže tento selektor sa vzťahuje na všetky prvky odsekov a všetky prvky rozdelenia. Ak by chýbala čiarka, selektor by sa namiesto toho použil na všetky prvky odseku, ktoré sú potomkami delenia. Jedná sa o iný druh selektora, preto je dôležitá čiarka.
Môžete zoskupiť ľubovoľnú formu selektora s ktorýmkoľvek iným selektorom. Tento príklad zoskupuje selektor triedy s voličom ID:
p.red, #sub {farba: # f00; }
Tento štýl sa vzťahuje na akýkoľvek odsek s atribútom triedy červená a akýkoľvek prvok (pretože druh nie je zadaný) s atribútom ID podč.
Môžete zoskupiť ľubovoľný počet selektorov vrátane selektorov, ktoré sú samostatnými slovami a zložených selektorov. Tento príklad obsahuje štyri rôzne selektory:
p, .red, #sub, div a: link {color: # f00; }
Toto pravidlo CSS by sa vzťahovalo na:
- Ľubovoľný prvok odseku
- Akýkoľvek prvok s triedou červená
- Akýkoľvek prvok s ID podč
- The odkaz pseudo trieda kotviacich prvkov, ktoré sú potomkami rozdelenia.
Posledný selektor je zložený selektor. Ako je znázornené, dá sa ľahko kombinovať s ostatnými selektormi v tomto pravidle CSS. Pravidlo určuje farbu # f00 (červená) na týchto štyroch selektoroch, čo je lepšie na dosiahnutie rovnakého výsledku.
Akýkoľvek selektor je možné zoskupiť
Môžete umiestniť ľubovoľný platný selektor do skupiny a všetky prvky v dokumente, ktoré zodpovedajú všetkým zoskupeným prvkom, budú mať rovnaký štýl založený na tejto vlastnosti štýlu.
Niektorí dizajnéri uprednostňujú zoznam zoskupené prvky na samostatných riadkoch kvôli čitateľnosti v kóde. Vzhľad na webe a rýchlosť načítania zostávajú rovnaké. Môžete napríklad kombinovať štýly oddelené čiarkami do jednej vlastnosti štýlu v jednom riadku kódu:
th, td, p.red, div # firstred {farba: červená; }
alebo môžete pre prehľadnosť uviesť štýly na jednotlivých riadkoch:
th,
td,
p.red,
div # firstred
{
farba: červená;
}
Prečo zoskupovať selektory CSS?
Zoskupenie selektorov CSS pomáha minimalizovať veľkosť vašej šablóny štýlov, aby sa načítavala rýchlejšie Je pravda, že šablóny štýlov nie sú hlavnými vinníkmi pomalého načítania; Súbory CSS sú textové súbory, takže aj veľmi dlhé listy CSS sú v porovnaní s neoptimalizovanými obrázkami malé. Napriek tomu pomáha každá optimalizácia, a ak dokážete z CSS oholiť veľkosť a načítať stránky oveľa rýchlejšie, je to dobrá vec.
Zoskupenie selektorov tiež výrazne uľahčuje údržbu stránok. Ak potrebujete urobiť zmenu, môžete jednoducho upraviť jedno pravidlo CSS namiesto viacerých. Tento prístup šetrí čas a problémy.
Záver: Zoskupenie selektorov CSS zvyšuje efektivitu, produktivitu, organizáciu a v niektorých prípadoch dokonca rýchlosť načítania.