Was bedeutet der Begriff 'Kaskade' in CSS?

Der CSS-Cascade bestimmt, welcher der widersprüchlichen Stile auf ein Element angewendet werden soll. Sie basiert auf drei Hauptkriterien:

1. Wichtigkeit: Stile mit !important haben die höchste Priorität.
2. Spezifität: Spezifischere Selektoren überschreiben weniger spezifische. Die Spezifität wird anhand der Anzahl der IDs, Klassen/Pseudo-Klassen/Attribut-Selektoren und Elemente/Pseudo-Elemente im Selektor berechnet.
3. Reihenfolge im Quellcode: Bei gleicher Wichtigkeit und Spezifität gilt die zuletzt deklarierte Regel.

Zusätzlich zu diesen drei Faktoren werden weitere berücksichtigt:

• Stilquelle: Benutzerstile (in den Browsereinstellungen), Autorenstile (externe und interne Stile, Inline-Stile), Standardbrowserstile.
• Vererbung: Einige Eigenschaften werden von Elternelementen an Kind-Elemente vererbt.

Beispiel für Spezifität:

/* Spezifität: 0-1-0 */
.meine-klasse {
  farbe: blau;
}

/* Spezifität: 1-0-0 */
#mein-id {
  farbe: rot;
}

In diesem Fall hat das Element mit der ID mein-id und der Klasse meine-klasse die Textfarbe Rot, da die ID #mein-id eine höhere Spezifität hat als .meine-klasse.