Kuidas toimivad erinevad stiilide prioriteedid CSS-is?

CSS-is stiilide prioriteedid määratakse kaskaadi mehhanismi ja valijate spetsiifilisuse kaudu. Põhiprintsiibid on:

1. Spetsiifilisus — see on valija kaal, mis arvutatakse ID-de, klasside, siltide ja teiste komponentide arvu põhjal. Mida kõrgem on spetsiifilisus, seda suurem on stiili prioriteet.

   • ID valija (#id) omab kõrget prioriteeti.
   • Klassid (.klass), atribuudid ja pseudoselktorid omavad keskmist prioriteeti.
   • Sildid (div, p) omavad madalat prioriteeti.

2. Kaskaad — kui kaks reeglit omavad sama spetsiifilisust, rakendatakse see, mis on koodis hiljem deklareeritud.

3. !important — lisab stiilile maksimaalse prioriteedi, üle kirjutades teised reeglid, välja arvatud teised !important-id, mille spetsiifilisus on kõrgem.

4. Pärimine — mõned omadused (color, font-family) pärivad vanemalt, kui neid ei ole üle kirjutatud.

Näide:

#header { color: red; }       /* spetsiifilisus 100 */
.menu { color: blue; }        /* spetsiifilisus 10  */
div { color: green; }         /* spetsiifilisus 1   */

/* Kui elemendil on id="header" ja klass="menu", värv on punane */

Seega valib brauser kõige kõrgema spetsiifilisusega stiili, arvestades järjekorda ja !important olemasolu.