Ko bi lahko več pravil oblikovalo element, dva mehanizma odločita rezultat: kaskada (katero pravilo zmaguje) in dedovanje (katere lastnosti se prenašajo od staršev).
Brskalnik izbere zmagovalno deklaracijo z preverjanjem po prioriteti:
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) */
Nekatere lastnosti (večinoma besedilo-povezane) so avtomatično dedovane potomcem; večina ni.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Dedovane po privzeto: color, font-*, line-height, text-align, visibility, cursor. Niso dedovane: 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 */
}
To je razlog, zakaj pravilo nizke specifičnosti lahko izgubi čeprav je napisano kasneje — specifičnost se preverja pred vrstnim redom izvora. Razumevanje vrstnega reda (pomembnost → specifičnost → vrstni red izvora) pojasni skoraj vsak primer "moj slog se ne uporablja".
Kaskada in dedovanje so jedro modela kako CSS dejansko razrešuje.
Znanje vrstnega reda prioritet razhroščuje konflikte, znanje katere lastnosti se dedujejo vam omogoča nastaviti color/font enkrat na body namesto povsod, in inherit/initial/unset vam dajo natančen nadzor — skupaj so tisto, kar naredi CSS napovedljiv namesto čarobnega.