A CSS-választók csoportosításakor ugyanazokat a stílusokat több különböző elemre alkalmazza anélkül, hogy megismételné a stíluslap stílusait. Ahelyett, hogy két, három vagy több CSS-szabály lenne, amelyek ugyanazt csinálják (például valaminek a színét pirosra állítják), egyetlen CSS-szabályt használ, amely ugyanazt hajtja végre. Ennek a hatékonyságnövelő taktikának a titka a vessző.
A CSS-választók csoportosítása
A CSS-választók csoportosításához egy stíluslapba, vesszővel válassza el több csoportosított választót a stílusban. Ebben a példában a stílus befolyásolja a p és a div elemeket:
div, p {szín: # f00; }
Ebben az összefüggésben a vessző jelentése "és", tehát ez a választó minden bekezdéselemre és minden osztási elemre vonatkozik. Ha a vessző hiányzik, akkor a választó minden szakaszelemre alkalmazandó, amely egy osztás gyermeke. Ez egy másfajta választó, ezért a vessző fontos.
A választó bármely formáját csoportosíthatja bármely más választóval. Ez a példa osztályválasztót csoportosít egy azonosító választóval:
p.red, #sub {color: # f00; }
Ez a stílus minden olyan bekezdésre vonatkozik, amelynek class attribútuma a piros és bármely elem (mivel a fajtát nem adják meg), amelynek azonosítója: alatti.
Tetszőleges számú szelektort csoportosíthat, beleértve az egyszavas szelektorokat és az összetett szelektorokat is. Ez a példa négy különböző választót tartalmaz:
p, .red, #sub, div a: link {color: # f00; }
Ez a CSS-szabály a következőkre vonatkozna:
- Bármely bekezdés elem
- Bármely elem, amelynek osztálya piros
- Bármely elem azonosítóval alatti
- A link azoknak a horgonyelemeknek az álosztálya, amelyek egy osztás leszármazottai.
Ez az utolsó választó összetett választó. Mint látható, könnyen kombinálható a többi CSS-szabályban szereplő választóval. A szabály meghatározza a színét # f00 (piros) ezen a négy szelektoron, amely előnyösebb, ha négy külön szelektorot írunk ugyanazon eredmény elérése érdekében.
Bármely választó csoportosítható
Bármely érvényes választót elhelyezhet egy csoportban, és a dokumentum összes elemének, amely megfelel az összes csoportosított elemnek, ugyanaz a stílus lesz az adott stílus tulajdonság alapján.
Egyes tervezők inkább felsorolják a csoportosított elemek külön sorokban a kód olvashatósága érdekében. A weboldal megjelenése és a betöltési sebesség ugyanaz marad. Például egyesítheti a vesszővel elválasztott stílusokat egy stílus tulajdonságba egy kódsorban:
th, td, p.red, div # firstred {szín: piros; }
vagy az egyértelműség érdekében felsorolhatja a stílusokat az egyes sorokban:
th,
td,
piros,
div # firstred
{
piros szín;
}
Miért kell csoportosítani a CSS-választókat?
A CSS-választók csoportosítása segít minimalizálni a stíluslap méretét, így gyorsabban töltődik be. Igaz, a lassú betöltésnél nem a stíluslapok a fő bűnösök; A CSS fájlok szöveges fájlok, így még a nagyon hosszú CSS lapok is aprók az optimalizálatlan képekhez képest. Ennek ellenére az optimalizálás minden apró része segít, és ha sikerül egy kis méretet levonni a CSS-ről, és sokkal gyorsabban betölteni az oldalakat, az jó dolog.
A választók csoportosítása a telepek karbantartását is sokkal könnyebbé teszi. Ha változtatni kell, akkor egyszerűen egyetlen CSS-szabályt szerkeszthet több szabály helyett. Ez a megközelítés időt és gondot takarít meg.
A lényeg: A CSS-választók csoportosítása növeli a hatékonyságot, a termelékenységet, a szervezettséget, és egyes esetekben még a terhelés sebességét is.