Grupuodami CSS parinkiklius, tuos pačius stilius pritaikote keliems skirtingiems elementams, nepakartodami stilių savo stilių lentelėje. Užuot turėję dvi, tris ar daugiau CSS taisyklių, kurios daro tą patį (pvz., Nustatykite kažko spalvą raudonai), jūs naudojate vieną CSS taisyklę, kuri įgyvendina tą patį dalyką. Šios efektyvumą didinančios taktikos paslaptis yra kablelis.
Kaip sugrupuoti CSS selektorius
Norėdami sugrupuoti CSS parinkiklius stiliaus lape, naudokite kablelius, kad atskirtumėte kelis sugrupuotus selektorius pagal stilių. Šiame pavyzdyje stilius veikia elementus p ir div:
div, p {spalva: # f00; }
Šiame kontekste kablelis reiškia „ir“, todėl šis parinkiklis taikomas visiems pastraipos elementams ir visiems padalijimo elementams. Jei kablelio trūksta, selektorius vietoj jo taikys visus pastraipos elementus, kurie yra padalijimo vaikas. Tai yra kitokio tipo parinkiklis, todėl kablelis yra svarbus.
Galite sugrupuoti bet kokio tipo selektorių su bet kuriuo kitu parinkikliu. Šis pavyzdys grupuoja klasės parinkiklį su ID parinkikliu:
p.red, #sub {color: # f00; }
Šis stilius tinka bet kuriai pastraipai, kurios klasės atributas yra raudona ir bet kurį elementą (nes rūšis nenurodyta), kurio ID atributas yra poskyris.
Galite sugrupuoti bet kokį skaičių selektorių, įskaitant pasirinkiklius, kurie yra pavieniai žodžiai, ir sudėtinius selektorius. Šiame pavyzdyje yra keturi skirtingi selektoriai:
p, .red, #sub, div a: link {spalva: # f00; }
Ši CSS taisyklė bus taikoma:
- Bet kuris pastraipos elementas
- Bet koks elementas, kurio klasė yra raudona
- Bet kuris elementas, kurio ID yra poskyris
- nuoroda inkaro elementų, kurie yra padalinio palikuonys, pseudo klasė.
Paskutinis selektorius yra sudėtinis selektorius. Kaip parodyta, jis lengvai derinamas su kitais šios CSS taisyklės selektoriais. Taisyklė nustato # f00 (raudona) ant šių keturių selektorių, o geriau norint parašyti keturis atskirus selektorius, norint pasiekti tą patį rezultatą.
Bet kurį pasirinkiklį galima sugrupuoti
Galite patalpinti bet kurį galiojantį žymeklį į grupę, o visi dokumento elementai, atitinkantys visus sugrupuotus elementus, turės tą patį stilių, pagrįstą tos stiliaus ypatybe.
Kai kurie dizaineriai nori išvardyti sugrupuoti elementai atskirose kodo įskaitomumo eilutėse. Išvaizda svetainėje ir apkrovos greitis išlieka tas pats. Pvz., Galite sujungti stilius, atskirtus kableliais, į vieną stiliaus ypatybę vienoje kodo eilutėje:
th, td, p.red, div # firstred {spalva: raudona; }
arba aiškumo dėlei galite išvardyti stilius atskirose eilutėse:
th,
td,
raudona,
div # firstred
{
spalva: raudona;
}
Kodėl verta rinktis CSS selektorius?
Grupavę CSS parinkiklius galite sumažinti savo stiliaus lapo dydį, kad jis būtų įkeltas greičiau. Tiesa, stiliaus lapai nėra pagrindiniai lėtos apkrovos kaltininkai; CSS failai yra tekstiniai failai, todėl net ir labai ilgi CSS lapai yra maži, palyginti su neoptimizuotais vaizdais. Vis tiek kiekvienas optimizavimas padeda ir jei galite nuslėpti savo CSS dydį ir įkelti puslapius daug greičiau, tai yra geras dalykas.
Grupavus selektorius, taip pat žymiai lengviau atlikti svetainės priežiūrą. Jei reikia atlikti pakeitimus, galite paprasčiausiai redaguoti vieną CSS taisyklę, o ne kelias. Toks požiūris taupo laiką ir rūpesčius.
Esmė: CSS selektorių grupavimas padidina efektyvumą, produktyvumą, organizuotumą ir kai kuriais atvejais net apkrovos greitį.