Kaskade, Spezifität und Vererbung

Lerne mit der Spezifität vorherzusagen, welche CSS-Regel gewinnt, und nutze die Vererbung, um weniger Code zu schreiben.

8 Min. · 3 Fragen

Du schreibst eine Regel, lädst die Seite neu … und nichts ändert sich. Meistens ist nicht ein Bug schuld, sondern die Kaskade. Wenn mehrere Regeln dasselbe Element ansprechen, löst der Browser den Konflikt in dieser Reihenfolge auf: die Herkunft der Regel (Browser-Stile, dann deine), die Spezifität des Selektors und schließlich die Reihenfolge im Code. Wenn du diesen Mechanismus beherrschst, sparst du dir Stunden an Debugging.

p {
  color: gray;
}

.article p {
  color: navy;
}

Die Spezifität wird als dreiteilige Punktzahl berechnet: (IDs, Klassen, Elemente). #menu erreicht 1-0-0, .nav-link erreicht 0-1-0, a erreicht 0-0-1. Du vergleichst von links nach rechts: #menu (1-0-0) schlägt .nav .link .active (0-3-0), sogar mit drei Klassen. Kopfübung: Wer gewinnt zwischen header nav a (0-0-3) und .main-link (0-1-0)? Die Klasse, denn eine Klasse wiegt schwerer als beliebig viele Elemente.

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

Die Vererbung ist dein Verbündeter, um weniger Code zu schreiben: Textbezogene Eigenschaften (color, font-family, font-size, line-height) werden automatisch an Nachfahren weitergegeben. Box-Eigenschaften (margin, padding, border, width) werden nicht vererbt - zum Glück, sonst würde jedes Kind den Rahmen seines Elternelements erben. Definiere deine Typografie also einmal, auf der höchsten Ebene.

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Zwei Regeln sprechen denselben Absatz an: #intro { color: red; }, dann .text { color: blue; }. Welche Farbe wird angewendet?
   • Blau, weil die Klasse zuletzt deklariert wird
   • Rot, weil eine ID spezifischer ist als eine Klasse
   • Keine, der Browser meldet einen Konflikt
2. Welche dieser Eigenschaften wird standardmäßig von Nachfahren-Elementen geerbt?
   • margin
   • color
   • border
   • padding
3. Zwei Selektoren haben exakt dieselbe Spezifität und sprechen dasselbe Element an. Welche Regel gewinnt?
   • Die zuletzt im Stylesheet geschriebene Regel
   • Die zuerst geschriebene Regel
   • Die Regel mit dem kürzesten Selektor