Miks CSS-i valijad päranduvad liiga palju?

CSS-i selektorid ei ole pärandatud. Pärandamine CSS-is tähendab teatud omaduste edastamist elemendilt selle järeltulijatele. Selektorid on mustrid, mis valivad elemendid stiilide rakendamiseks.

Pärandamine võib tähendada, et ühe selektori abil rakendatud stiile saab üle kirjutada (pärandada) teise selektori abil rakendatud stiilidega. See ei ole seotud pärandamisega, vaid CSS-i kaskaadi mehhanismiga, mis määrab, millised stiilid rakenduvad elemendile, kui mitu CSS reeglit määravad sama omaduse väärtuse.

Faktorid, mis mõjutavad kaskaadi ja "üle kirjutamise":

1. Spetsifilisus (Specificity): Kõrgema spetsifilisusega selektorid on kaalult suuremad.
2. Järjekord (Order): Kui spetsifilisus on sama, rakendub viimane deklareeritud reegel.
3. Olulisus (!important): !important-ga märgitud deklaratsioonidel on kõrgeim prioriteet (välja arvatud sisseehitatud stiilid kasutaja agendist, millel !important puudub).
4. Stiilide päritolu (Origin): Stiilid tulevad erinevatest allikatest (brauser, kasutaja, autor).

Näide spetsifilisusest:

/* Madal spetsifilisus */
p {
  color: blue;
}

/* Kõrge spetsifilisus - üle kirjutab värvi */
.text-section p {
  color: red;
}