Ursprung von Style Sheets

Style Sheets können entweder vom Autor, vom Leser bzw. User oder vom Browser stammen. Bei Konflikten, d.h. bei Regeln, die gleiche Elemente betreffen, haben die Regeln des Autors Vorrang vor denen des Users. Jene wiederum überschreiben die Einstellungen des Browsers.

!important Deklarationen

Es besteht die Möglichkeit, das Gewicht von Style Deklarationen mittels des Ausdrucks "!important" zu erhöhen. Eine Style Deklaration des Lesers mit "!important" überschreibt eine einfache Deklaration des Autors. Geben jedoch sowohl Autor als auch Leser eine Deklaration mit "!important" an, hat wiederum die Style Deklaration des Autors Vorrang.

Importierte Style Sheets

Mittels der @import Regel können Style Sheets aus externen Dateien in das aktuelle Style Sheet eingebunden werden. Regeln gleichen Ursprungs werden in der umgekehrten Reihenfolge, in der sie definiert wurden gewichtet. Also haben die zuletzt angegebenen Regeln höheres Gewicht als die vorhergehenden.
Die Reihenfolge, in der @import Anweisungen in Style Sheets auftreten, ist daher nicht ohne Bedeutung.

Berechnung der Spezifizität eines Selektors

Auch innerhalb ein und desselben Style Sheet kann der Fall auftreten, dass auf ein Element mehrere Style Regeln anwendbar sind. Wenn diese Regeln zudem noch Einstellungen der gleichen Eigenschaften enthalten, muss entschieden werden, welche der Deklarationen gelten sollen. Zu diesem Zweck werden die Selektoren der Regeln herangezogen. Je genauer ein Selektor ein Element beschreibt, umso höher wird die betreffende Regel eingestuft. Ein Maß für diese Einstufung ist die sog. Spezifizität. Je detaillierter die Selektoren, desto höher ihre Spezifizität.
Zur Bestimmung der Spezifität werden die id Attribute (a), die class Attribute (b) und die Elemente (c) gezählt. Die Anzahl der Selektoren der Kategorie a werden mit dem größten Faktor gewichtet, die Anzahl der Selektoren der Kategorie b mit dem zweitgrößten und die der Kategorie c mit dem kleinsten. Die Faktoren müssen so gewählt werden, dass das maximale Gewicht einer Kategorie kleiner als das geringste Gewicht der nächst höheren Kategorie ist. Die Spezifität einer Style Deklaration ergibt sich aus der Summe der so ermittelten Gewichte. Formal ausgedrückt:

S = a * f_a+ b * f_b+ c * f_c   mit   f_b > c_max * f_c   und  f_a > (b_max * f_b + c_max * f_c)

Folgende Beispiele sollen den Sachverhalt verdeutlichen (f_c=1, c_max=9, f_b=10, b_max=9, f_a=100):

Pseudoelemente werden wie normale Elemente und Pseudoklassen wie normale Klassen gewichtet.

Verfahren zur Bestimmung der maßgeblichen Deklaration (Kaskadierungsordnung)

Bei der Bestimmung des maßgeblichen Eigenschaftswertes wird wie folgt verfahren:

1. Zunächst werden alle passsenden Style Sheet Deklarationen gesucht. Falls keine passenden Deklarationen gefunden werden, wird der geerbte Wert verwendet. Wenn eine Vererbung ausgeschlossen ist oder wenn es sich um das Element HTML handelt, wird der Standardwert gesetzt.
2. Passende Deklarationen werden nach ihrem durch "!important" explizit angegebenem Gewicht sortiert.
3. Die Deklarationen werden nach ihrem Ursprung sortiert. Deklarationen des Autors haben Vorrang vor denen des Lesers, diese wiederum haben Vorrang vor denen des Browsers. Style Sheet Deklarationen, die durch "@import" eingefügt wurden, haben den gleichen Ursprung wie das Style Sheet selbst.
4. Die Deklarationen werden nach ihrer Spezifität geordnet.
5. Bei gleicher Spezifität hat die zuletzt angegebene Deklaration Vorrang.

Eine inline Deklaration mit dem Attribut style hat die gleiche Spezifität wie eine mit einem ID - Selektor im Style Block:

<STYLE type="text/css">
#abc { color: green; }
</STYLE>
<DIV id="abc" style="color: red;">

Beide Deklarationen haben das gleiche Gewicht, gemäß Regel 5 überschreibt aber die letzte Deklaration die vorhergehende. Die Textfarbe des DIV Elements ist also rot.