Es wird vorkommen, dass zwei oder mehr Deklarationen für das gleiche Element existieren. Es kann ebenso gut vorkommen, dass zwischen diesen beiden ein Konflikt herrscht. Wenn Konflikte wie dieser auftauchen, wird die Deklaration mit der höchsten Gewichtung genommen. Aber wie wird diese Gewichtung bestimmt?
Wenn Dokumente in einem Browser geladen werden, werden alle Deklarationen sortiert und gewichtet. Dann werden diese auf das Dokument angewendet, basierend auf dieser Gewichtung. Die Sortierung läuft in vier Schritten ab, da dieser Prozess ziemlich umfangreich ist, werden wir diese an einem HTML-Element (<h2>) beispielhaft erläutern.
Nachdem alle Stylesheets ausgewertet wurden (Browser-, Benutzer- und Autoren-Stylesheets) werden alle Deklarationen gefunden, die für ein <h2>-Element gelten.
Das Browser-Stylesheet könnte folgende relevante Regel enthalten
h2 { font-size: 1.5em; margin: .83em 0; color: black }
Das Benutzer-Stylesheet könnte die folgende Regel enthalten
h2 { color: brown !important; }
Das Autoren-Stylesheet könnte folgende, für das <h2>-Element relevante, Regel enthalten:
h2 { color: green; font-size: 1.2em; padding: 10px; }
h2#main { color: red; }
h2.navigation { color: blue;}
Die oben gefunden Regeln werden nun nach Gewichtung und Ursprung sortiert. Bei normalen Deklarationen wird das Autoren-Stylesheet jeweils Benutzer- und Browser-Stylesheet überschreiben – solange keine !important-Deklaration im Benutzer-Stylesheet vorhanden ist.In diesem Falle würde das Benutzer-Stylesheet jeweils Autoren- und Browser-Stylesheet überschreiben.
Für allgemeine Benutzer werden die <h2>-Elemente die nicht mit #main oder .navigation versehen wurden folgendermaßen dargestellt:
font-size: 1.2em; /* Autor gewinnt über den Browser */
margin: .83em 0; /* Nur vom Browser angegeben */
padding: 10px; ; /* Nur vom Autor angegeben */
color: green; /* Autor gewinnt über den Browser */
Für den Benutzer, der eine !important-Regel gesetzt hat, würden diese <h2>-Elemente ohne #main oder .navigation folgendermaßen aussehen:
font-size: 1.2em; /* Autor gewinnt über den Browser */
margin: .83em 0; /* Nur vom Browser angegeben */
padding: 10px; ; /* Nur vom Autor angegeben */
color: brown; /* Benutzer gewinnt wegen der !important-Regel */
Auch wenn wir die allgemeinen <h2>-Stile aussortiert haben, könnten dennoch Konflikte in anderen Teilen des Dokuments auftauchen. Was passiert mit einem <h2>-Element, welches mit #main versehen wurde?
Jedem Selektor wird eine Spezifität gegeben, welche auf den kompletten Selektor berechnet wird. Spezifischere Selektoren überschreiben allgemeinere Selektoren. Diese Berechnung basiert auf den folgenden (vereinfachten) Regeln:
a . Anzahl der IDs im kompletten Selektor
b . Anzahl von anderen Selektoren im kompletten Selektor
c . Anzahl der Elemente im kompletten Selektor
Diese drei Berechnungen werden geschrieben als a-b-c. Beim Beispiel oben würden die folgenden Deklarationen eine Bewertung bekommen wie folgt:
h2 { font-size: 1.5em; margin: .83em 0; color: black }
0-0-1 > Spezifität = 1
h2 { color: brown !important; }
0-0-1 > Spezifität = 1
h2 { color: green; font-size: 1.2em; padding: 10px; }
0-0-1 > Spezifität = 1
h2#main { color: red; }
1-0-1 > Spezifität = 101
h2.navigation { color: blue;}
0-1-1 > Spezifität = 11
Das bedeutet, dass h2#main die größte Gewichtung hat, gefolgt von h2.navigation.
Für allgemeine Benutzer (welche nicht von der !important-Regel betroffen sind) würde jedes <h2>-Element mit dem ID-Attribut „main“ folgendermaßen dargestellt:
color: red; /* ID ist spezifischer als der Typ-Selektor */
Jedes <h2>-Element mit der Klasse „navigation“ würde so aussehen:
color: blue; /* Klasse ist spezifischer als der Typ-Selektor */
Gäbe es eine Kollision zwischen „#main“ und „.navigation“ würde die ID gewinnen und das <h2>-Element würde so aussehen:
color: red; /* ID ist spezifischer als ein Klassen- oder Typ-Selektor */
Wenn zwei Regeln die gleiche Gewichtung, den gleichen Ursprung und die gleiche Spezifität würde die zuletzt geschriebene Regel gewinnen. Regeln in einem importierten Stylesheet werden betrachtet als wären sie vor den Regeln im Stylesheet selbst.
Beispielsweise könnte das Stylesheet zwei identische Regeln in verschiedenen Sektionen des Dokuments enthalten.:
h2 { color: blue;}
h2 { color: green; }
Die zweite Regel würde gewinnen, da diese später in dem Dokument auftaucht.