Immer wieder kommt es vor dass man eine CSS Regel schreibt und sich wundert wieso die erstellten Anweisungen auf der Webseite keine Auswirkungen zeigen. Der Grund hierfür ist in vielen Fällen die falsche Gewichtung, der Ursprung, die Spezifität und / oder die Reihenfolge.

In den letzten beiden Ausgaben des Webstandards Magazin war ein sehr interessanter Artikel darüber. Damit auch die wenigen unter euch die dieses hervorragende Magazin nicht regelmäßig lesen, und damit auch ich im Zweifelsfall weiß wo ich noch mal nachlesen kann, schreibe ich das mal hier in Kurzform zusammen.

Die Ausführungsreihenfolge der CSS Eigenschaften läuft in 4 Stufen ab.

Stufe 1: Die Gewichtung
Stufe 2: Der Ursprung
Stufe 3: Die Spezifität der Selektoren
Stufe 4: Die Reihenfolge der Selektoren

Den Ursprung kann man kurz folgendermaßen zusammen fassen:
Das Browser-Stylesheet bestimmt als erstes wie eine Seite aussehen soll. Allerdings nur rudimentär mit Anweisungen zu Schriftgrößen, Farben, Links, Formularen usw.
Neuere Browser gestatten es dem Benutzer aber auch eigene Browser-Stylesheets anzulegen. So genannte Benutzer-Stylesheets.
Als drittes gibt es dann noch die Autoren-Stylesheets. Das sind alle CSS-Anweisungen die von uns Webworkern definiert werden.

Daraus ergibt sich schon mal folgende Reihenfolge für die Gewichtung der einzelnen Stylesheets.

1. Benutzer-Stylesheet mit !important
2. Autoren-Stylesheet mit !important
3. Autoren-Stylesheet
4. Benutzer-Stylesheet
5. Browser-Stylesheet

Manch einen wird es wundern wieso das Benutzer-Stylesheet mit der !important Anweisung aus Platz 1 liegt und damit die höchste Priorität hat, aber das gibt den Benutzern mit körperlichen Beeinträchtigungen die Möglichkeit, in letzter Instanz, zu bestimmen wie eine Seite aussehen soll.

Nachdem nun klar ist welche Stylesheets wann angewendet werden geht es um die so genannte Spezifität.

Zur Ermittlung der Spezifität wird ein Punktesystem mit vier kommagetrennten Zahlen verwendet. Wobei die erste Zahl die höchste Wertigkeit hat und die letzte die Niedrigste.

Anweisungen die immer Auswirkungen vor allen andern Anweisungen haben, mit Ausnahme derer mit !important, sind diejenigen die mittels style="" definiert werden. Aber da wir ja alle moderne Webworkern sind und brav unser Layout vom Content trennen, kommt das für uns natürlich nicht in Frage.
Hätten in unserem Punktesystem aber einen Wert von 1000 oder (1,0,0,0)

Bleiben die Sektoren in unseren externen CSS-Dateien.
Da wäre als erstes die Selektion anhand einer ID (#nav) welche in unserem Punktesystem einen Wert von 100 oder (0,1,0,0) hat.

Der Klassen-Selektor und Pseudoklassen(.level1 oder :first-child) erhalten den Wert 10 oder(0,0,1,0)

Als letztes dann noch der Typ-Selektor und die Pseudoelemente (p oder :first-letter). Sie haben den Wert 1 oder (0,0,0,1)

Der Universalselektor * besitzt keine Spezifität und hat den Wert 0.

Selektor Beispiel Punkte
style=”" <p style=”color:red”> 1000 – 1,0,0,0
ID #nav 0100 – 0,1,0,0
Klasse, oder Pseudoklasse .level, :first-child 0010 – 0,0,1,0
Typselekor oder Pseudoelement p, :first-letter 001 – 0,0,0,1

Um das ganze etwas zu veranschaulichen, hier noch ein Beispiel ausgehend von folgendem HTML.

<div id="nav">
   <div class="level">
      <p class="info">Ich bin ein Text</p>
   </div>
</div>

Wenn man jetzt folgendes in sein CSS schreibt wundert man sich schnell wieso nicht der gewünschte Erfolg eintritt und der Text in rot dargestellt wird.

#nav p { color: black;}
.info {color: red;}

Die Erklärung ist ganz einfach, die Anweisung #nav p hat laut unserem Punktesystems die Spezifität 101 oder (0,1,0,1).
Die Anweisung .info aber nur 10 (0,0,1,0).
Somit gewinnt die Klasse mit dem höherem Wert. In diesem Fall #nav p

Um den gewünschten Effekt zu erzielen muss man die Wertigkeit der Anweisung erhöhen.
Das geschieht entweder über die !important Regel, welche einer Anweisung auf die höchste Priorität setzt. Oder aber man selektiert ein wenig anders.
#nav .info {color: red;} setzt die Wertigkeit auf auf 110 oder (0,1,1,0)

Direkt gegenüber gestellt haben wir folgende Situation:
#nav p = 101
#nav .info = 110

Gerade wenn Stylesheets auf mehre Dateien verteilt sind oder einige 100 Zeilen umfassen kann man sich sehr leicht unbewusst einzelne Anweisungen überschreiben. Ich versuche die !important Regel so selten wie möglich zu verwenden da sie nur schwer überschrieben werden kann. Manchmal möchte man aber ganz bewusst Ausnahmen schaffen.

Der letzte und 4. Punkt bei der Ausführung ist die Reihenfolge.
Bei einer gleichen Wertigkeit gewinnt die Regel die als letztes im Code vorkommt.
Um in unserem Beispiel die letzte Anweisung gewinnen zu lassen, indem wir für eine gleiche Wertigkeit sorgen, müssten wir folgende Anweisungen schreiben.

p.info {color: black}
.level p { color: red;}

Beide Anweisungen haben den Wert 11 oder ( 0,0,1,1)

So das soll es gewesen sein. Wer es noch genauer wissen möchte, dem empfehle ich die Artikel im Webstandards Magazin. Dort wird dann unter anderem erklärt in welchen Fällen der Universalselektor doch eine Wertigkeit bekommen kann und vieles mehr.
Mir bleibt nur noch zu sagen, dass niemand behauptet hat das CSS leicht sei ;-)