Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

11.5 3. Sortiere nach Reihenfolge

Für das Beispiel ist die Suche für den Browser wie gesagt eigentlich erledigt, aber es kann noch eine weitere Stufe der Kaskade geben, nämlich die Sortierung nach der Reihenfolge des Auftretens im Quelltext.

Schauen Sie sich folgenden fiktiven Style an:

01 #navibereich ul {
02   margin: 20px;
03   margin-bottom: 0;
04 }

In diesem Fall wird margin-bottom genau genommen gleich zweimal beschrieben. In Zeile 2 werden in Kurzschreibweise 20px unterer Außenabstand definiert, in Zeile 3 hingegen explizit 0. Da beide Deklarationen dieselbe Wichtigkeit (Stufe 3) und eine gleich hohe Spezifität (101 Punkte) haben, sortiert der Browser nach Reihenfolge:

  • Wenn zwei Deklarationen aus demselben Stylesheet stammen und sowohl die gleiche Wichtigkeit als auch die gleiche Spezifität haben, gewinnt die zuletzt notierte Anweisung.

Die zuletzt notierte Anweisung. Also je dichter am zu gestaltenden Element die Deklaration steht, desto vorrangiger ist sie. Dabei liest der Browser von links nach rechts und von oben nach unten. Im Listing etwas weiter oben gilt also der Wert margin-bottom: 0.

Nach dieser Runde gibt es in jedem Fall eine Entscheidung und die Kaskade ist beendet.