Wie funktionieren die verschiedenen Prioritäten von Stilen in CSS?

In CSS werden die Prioritäten von Stilen durch den Kaskadierungsmechanismus und die Spezifität der Selektoren bestimmt. Die Grundprinzipien sind:

1. Spezifität — ist das Gewicht des Selektors, das anhand der Anzahl von ID, Klassen, Tags und anderen Komponenten berechnet wird. Je höher die Spezifität, desto priorisierter ist der Stil.

   • Der ID-Selektor (#id) hat eine hohe Priorität.
   • Klassen (.klasse), Attribute und Pseudoklassen haben eine mittlere Priorität.
   • Tags (div, p) haben eine niedrige Priorität.

2. Kaskadierung — wenn zwei Regeln die gleiche Spezifität haben, wird die angewendet, die später im Code deklariert wurde.

3. !important — fügt dem Stil die maximale Priorität hinzu, überschreibt andere Regeln, außer andere !important mit höherer Spezifität.

4. Vererbung — einige Eigenschaften (z.B. color, font-family) werden vom Elternteil vererbt, wenn sie nicht überschrieben werden.

Beispiel:

#header { color: red; }       /* Spezifität 100 */
.menu { color: blue; }        /* Spezifität 10  */
div { color: green; }         /* Spezifität 1   */

/* Wenn ein Element die ID "header" und die Klasse "menu" hat, ist die Farbe rot */

Auf diese Weise wählt der Browser den Stil mit der höchsten Spezifität, unter Berücksichtigung der Reihenfolge und der Anwesenheit von !important.