Több CSS-választó csoportosítása egy stílus tulajdonságban

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ő.

Férfi irodai dolgozó munkaállomáson, kilátás a vállára
Christopher Robbins / Photodisc / Getty Images 

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:

instagram viewer
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.

instagram story viewer