Zwei Regeln treffen dasselbe Element und setzen dieselbe Property. Wie entscheidet der Browser, welche gewinnt?

Der Browser löst das der Reihe nach auf: zuerst Origin und Wichtigkeit, dann Cascade Layers, dann Spezifität, dann Dokumentreihenfolge. Inline-Styles schlagen normale Autorenregeln, und eine important-Deklaration dreht die Origin-Reihenfolge um, sodass eine important-Regel von Nutzer oder User Agent eine important-Autorenregel schlagen kann. Innerhalb eines Layers zählt die Spezifität erst IDs, dann Klassen, Attribute und Pseudoklassen, dann Elementselektoren. Bei Gleichstand gewinnt die Regel, die zuletzt kommt.

Ich denke daran als eine Abfolge von Tiebreakern. Zuerst schaut der Browser auf Origin und Wichtigkeit, ein Inline-Style schlägt also eine Stylesheet-Regel, und eine important-Deklaration ändert die Ordnung komplett. Dann kommen Cascade Layers, und genau das übersehen die meisten: eine Regel außerhalb jedes Layers schlägt alles in einem Layer, egal wie spezifisch die Regel im Layer ist, und spätere Layer schlagen frühere. Erst danach wird Spezifität verglichen, und das sind drei Kategorien, erst IDs, dann Klassen, Attribute und Pseudoklassen, dann Elementselektoren, von links nach rechts verglichen, eine einzelne ID schlägt also beliebig viele Klassen. Ist alles gleich, gewinnt die letzte in der Dokumentreihenfolge. In der Praxis nutze ich Layers, damit das langweilig bleibt. Ich lege Reset in einen ersten Layer, dann Third Party, dann Komponenten, dann Utilities ganz zuletzt, damit eine Utility-Klasse immer gewinnt, ohne important zu brauchen. Der einzige Ort, an dem ich important noch verwende, ist eine wirklich nicht verhandelbare Regel, meistens irgendwas in einem Print-Stylesheet.