CSS specificity causing unexpected override

CSS specificity

Hibaüzenet

CSS specificity causing unexpected override

Hibás kód

/* általános */
p { color: red; }
/* specifikus */
div.container p { color: blue; }

Javított kód

div.container > p { color: blue; }
p { color: red; }

Magyarázat

CSS specificity hiba akkor fordul elő, amikor az egyik stílus váratlanul felülír egy másikat a szelektor specifikussága miatt. Például a `p` általános szabályt felülírja a `div.container p` speciálisabb szabály, ami nem mindig kívánatos. A megoldás, hogy kontrollálod a szelektorokat: vagy használj direkt > gyerekkezelést (`div.container > p`), vagy alkalmazz explicit kódszerkezetet, esetleg !important-et, de csak végső esetben.

További információ: MDN – CSS Specificity