Når du grupperer CSS-vælgere, anvender du de samme typografier på flere forskellige elementer uden at gentage typografierne i dit typografiark. I stedet for at have to, tre eller flere CSS-regler, der gør det samme (sæt f.eks. Farven på noget til rødt), bruger du en enkelt CSS-regel, der udfører den samme ting. Hemmeligheden bag denne effektivitetsfremmende taktik er kommaet.
Sådan grupperes CSS-vælgere
For at gruppere CSS-vælgere i et stilark, Brug kommaer til at adskille flere grupperede vælgere i stilen. I dette eksempel påvirker stilen p- og div-elementerne:
div, p {farve: # f00; }
I denne sammenhæng betyder et komma "og", så denne vælger gælder for alle afsnitelementer og alle delingselementer. Hvis kommaet manglede, ville vælgeren i stedet anvende på alle afsnitselementer, der er underordnet af en division. Det er en anden slags vælger, så kommaet er vigtigt.
Du kan gruppere enhver form for vælger med enhver anden vælger. Dette eksempel grupperer en klassevælger med en ID-vælger:
p.red, #sub {color: # f00; }
Denne stil gælder for ethvert afsnit med attributten klasse for rød og ethvert element (fordi typen ikke er specificeret) med en ID-attribut på under.
Du kan gruppere et vilkårligt antal vælgere, inklusive vælgere, der er enkeltord og sammensatte vælgere. Dette eksempel inkluderer fire forskellige vælgere:
p, .red, #sub, div a: link {color: # f00; }
Denne CSS-regel gælder for:
- Ethvert afsnit element
- Ethvert element med klassen rød
- Ethvert element med ID på under
- Det link pseudoklasse af ankerelementerne, der er efterkommere af en division.
Den sidste vælger er en sammensat vælger. Som vist kombineres det let med de andre vælgere i denne CSS-regel. Reglen indstiller farven på # f00 (rød) på disse fire vælgere, hvilket er at foretrække frem for at skrive fire separate vælgere for at opnå det samme resultat.
Enhver vælger kan grupperes
Du kan placere en hvilken som helst gyldig vælger i en gruppe, og alle elementer i dokumentet, der matcher alle de grupperede elementer, har den samme typografi baseret på denne stilegenskab.
Nogle designere foretrækker at liste listen grupperede elementer på separate linjer for læsbarhed i koden. Udseendet på webstedet og belastningshastigheden forbliver den samme. For eksempel kan du kombinere typografier adskilt af kommaer i en stilegenskab i en kodelinje:
th, td, p.red, div # firstred {farve: rød; }
eller du kan angive typografierne på de enkelte linjer for klarhedens skyld:
th,
td,
p.red,
div # firstred
{
farve: rød;
}
Hvorfor gruppere CSS-vælgere?
Gruppering af CSS-vælgere hjælper med at minimere størrelsen på dit typografiark, så det indlæses hurtigere. Ganske vist er stilark ikke de vigtigste synder i langsom indlæsning; CSS-filer er tekstfiler, så selv meget lange CSS-ark er små sammenlignet med uoptimerede billeder. Alligevel hjælper hver optimering, og hvis du kan barbere en vis størrelse fra din CSS og indlæse siderne meget hurtigere, er det en god ting.
Gruppering af vælgere gør vedligeholdelse af websteder også meget lettere. Hvis du har brug for at foretage en ændring, kan du blot redigere en enkelt CSS-regel i stedet for flere. Denne tilgang sparer tid og besvær.
Bundlinjen: Gruppering af CSS-vælgere øger effektivitet, produktivitet, organisering og i nogle tilfælde endda belastningshastighed.