När flera regler kan utforma ett element, bestäms resultatet av två mekanismer: kaskaden (vilken regel som vinner) och arv (vilka egenskaper som förs ned från föräldrar).
Webbläsaren väljer den vinnande deklarationen genom att kontrollera i prioritetsordning:
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) */
Vissa egenskaper (mestadels textrelaterade) ärvs automatiskt av nedåtkomst; de flesta är det inte.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Ärvs som standard: color, font-*, line-height, text-align, visibility, cursor. Ärvs inte: 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 */
}
Det är därför en regel med låg specificitet kan förlora även om den skrivs senare — specificitet kontrolleras före källordning. Att förstå ordningen (vikt → specificitet → källordning) förklarar nästan alla fall av "min stil tillämpas inte".
Kaskaden och arv är kärnmodellen för hur CSS faktiskt löses.
Att känna till prioritetsordningen felsöker konflikter, att veta vilka egenskaper som ärvs låter dig ställa in color/font en gång på body istället för överallt, och inherit/initial/unset ger dig precis kontroll — tillsammans är de vad som gör CSS förutsägbar snarare än magisk.