Când mai multe reguli ar putea stiliza un element, două mecanisme decid rezultatul: cascada (care regulă câștigă) și moștenirea (care proprietăți se transmit de la părinți la copii).
Navigatorul alege declarația câștigătoare verificând, în ordinea priorității:
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) */
Anumite proprietăți (în principal legate de text) sunt moștenite automat de descendenți; majoritatea nu sunt.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Moștenite implicit: color, font-*, line-height, text-align, visibility, cursor. Nu sunt moștenite: 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 */
}
Aceasta este motivul pentru care o regulă cu specificitate scăzută poate pierde chiar dacă este scrisă mai târziu — specificitatea se verifică înainte de ordinea surselor. Înțelegerea ordinii (importance → specificity → source order) explică aproape orice caz "stilul meu nu se aplică".
Cascada și moștenirea sunt modelul central al cum se rezolvă CSS de fapt.
Cunoașterea ordinii de precedență depanează conflictele, știind care proprietăți se moștenesc vă permite să setați color/font o singură dată pe body în loc să faceți asta peste tot, iar inherit/initial/unset vă dau control precis — împreună, ele fac CSS previzibil în loc de magic.