Kai kelios taisyklės gali stilizuoti elementą, du mechanizmai nusprendžia rezultatą: kaskada (kuri taisyklė laimi) ir paveldėjimas (kurios savybės perduodamos iš tėvų).
Naršyklė pasirenka laimėjusią deklaraciją tikrinant, prioriteto tvarka:
1. Importance → !important beats normal declarations
2. Specificity → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
p { color: blue; } /* specificity 0,0,1 */
.text { color: green; } /* specificity 0,1,0 → wins over the element rule */
p { color: red; } /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
Tam tikros savybės (dažniausiai su tekstu susijusios) automatiškai paveldi palikuonys; dauguma nėra.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Paveldi pagal numatytuosius nustatymus: color, font-*, line-height, text-align, visibility, cursor. Nepaveldi: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* force-take the parent's value */
border: initial; /* reset to the property's default */
all: unset; /* reset everything: inherit if inheritable, else initial */
}
Tai yra priežastis, dėl kurios mažo specifinio lygio taisyklė gali pralaimėti, net jei parašyta vėliau — specifikai tikrinama prieš šaltinio tvarką. Supratus tvarką (svarba → specifika → šaltinio tvarka) galima paaiškinti beveik kiekvieną "mano stilius neveikia" atvejį.
Kaskada ir paveldėjimas yra pagrindinė kaip CSS iš tikrųjų išsprendžia modelio dalis.
Žinojimas apie pirmaeilę tvarką deringia konfliktus, žinojimas, kurios savybės paveldi, leidžia nustatyti color/font vieną kartą body vietoje kur nors, o inherit/initial/unset suteikia tikslų valdymą — kartu jie CSS daro nuspėjimu, o ne magija.