Spezifität und Vorrang des CSS-Selektors

Wenn mehrere CSS-Selektoren auf ein einzelnes Element angewendet werden, muss der Browser bestimmen, welcher Selektor Vorrang hat. Dies wird als Selektorspezifität bezeichnet.

Regeln zur Bestimmung der Selektorspezifität:

1. !important und Inline-Stile überschreiben:

   • Stile, die mit dem !important-Flag oder inline mit dem style-Attribut deklariert wurden, haben die höchste Priorität.

2. Spezifität:

   • Die Spezifität eines Selektors wird durch die Anzahl und bestimmt Typ seiner Komponenten:

     • #id hat eine höhere Spezifität als .classname
     • .classname hat eine höhere Spezifität als tagname

3. Letzte Regel Vorrang:

   • Wenn zwei Selektoren die gleiche Spezifität haben, hat der zuletzt in der CSS-Datei deklarierte Vorrang.

Beispiel:

Betrachten Sie das folgende CSS Regeln:

body { font-size: 14px; }
#header { font-size: 16px; }

Für das

-Element innerhalb des gelten beide Regeln. Da der #header-Selektor jedoch eine höhere Spezifität aufweist (#id > Tagname), wird sein Schriftgrößenwert von 16 Pixel auf das

-Element angewendet.

Hinweis:

Es ist nicht ungewöhnlich, dass mehrere Regeln auf dasselbe Element mit unterschiedlichen Spezifitätsgraden abzielen. Dies kann verwendet werden, um Stile für bestimmte Fälle zu verfeinern oder globale Regeln für bestimmte Fälle zu überschreiben.