Ha több szabály is stílusozhat egy elemet, két mechanizmus dönti el az eredményt: a kaszkád (melyik szabály nyer) és az öröklés (mely tulajdonságok mennek le a szülőtől a gyerekekhez).
A böngésző a nyertes deklarációt úgy választja meg, hogy prioritási sorrendben ellenőrzi:
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) */
Egyes tulajdonságok (főleg szöveghez kapcsolódó) automatikusan örökölnek az utódok; a legtöbb nem.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Örököltek alapértelmezésben: color, font-*, line-height, text-align, visibility, cursor. Nem örököltek: 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 */
}
Ezért veszíthet egy alacsony specificitású szabály még akkor is, ha később írták — a specificitást az előtt ellenőrzik, hogy a forrás sorrendje. Az sorrend megértése (fontosság → specificitás → forrás sorrendje) szinte minden "az én stílusom nem működik" esetet megmagyarázza.
A kaszkád és az öröklés a hogyan oldódik fel a CSS alapmodellje.
A prioritási sorrend ismerete hibakeresést végez az ütközésekből, annak ismerete, hogy mely tulajdonságok örökölnek, lehetővé teszi, hogy a color/font egyszer a body elemre állítsa be az összes helyett, az inherit/initial/unset pedig pontosan szabályozhatja — együtt a CSS-t előreláthatóvá teszik a mágia helyett.