Wie wird CSS-Spezifität berechnet?

Question

Accepted Answer

Wenn mehrere Regeln dasselbe Element ansprechen, entscheidet die **Spezifität**, welche gewinnt. Sie ist ein Score, der aus den Teilen des Selektors berechnet wird und als Tupel `(ids, classes, elements)` verglichen wird.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Vergleichen Sie von links nach rechts; die erste Spalte, die sich unterscheidet, entscheidet über den Gewinner.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Schlüsselregeln

- Eine einzelne **id** wiegt schwerer als jede Anzahl von **Klassen**; eine einzelne Klasse wiegt schwerer als jede Anzahl von Elementen. (Sie können "addieren" niedrigere Ebenen nicht, um eine höhere zu schlagen.)
- Wenn die Spezifität **gleich** ist, gewinnt die Regel, die **später** im Quellcode auftaucht (Quellreihenfolge).
- **`!important`** überschreibt normale Spezifität komplett — ein letztes Mittel, das schwer zu überschreiben ist (Sie würden eine weitere `!important` mit höherer Spezifität benötigen).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Praktische Richtlinien

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Warum es wichtig ist

Der meiste "Warum wird mein CSS nicht angewendet?"-Frust ist ein Spezifitätskonflikt — eine spezifischere Regel an anderer Stelle gewinnt.

Wenn Sie Selektoren niedrig und flach halten (bevorzugen Sie einzelne Klassen, vermeiden Sie ids und `!important`), bleibt die Spezifität vorhersehbar, sodass Styles einfach zu überschreiben und zu verwalten sind.