# Warum gewinnt diese CSS-Regel, obwohl meine später im Stylesheet steht?

Canonical page: https://blame76.com/snippets/css/2026-09-17-warum-gewinnt-diese-css-regel-obwohl-meine-sp-ter-im-stylesheet-steht/
Category: Snippets
Type: CSS
Published: 2026-09-17
Updated: 2026-09-17
Tags: css, cascade, specificity, layer, important

Du setzt später im Stylesheet `color: blue`, der Browser zeigt trotzdem rot. „Die letzte Regel gewinnt“ ist nur die letzte Stufe der CSS-Kaskade.

## Die richtige Reihenfolge der Fragen

1. Treffen beide Regeln überhaupt auf das Element zu?
2. Haben sie denselben Ursprung und dieselbe Wichtigkeit (`!important`)?
3. Liegen sie in unterschiedlichen Cascade Layers?
4. Welche Spezifität haben die Selektoren?
5. Erst bei Gleichstand entscheidet die spätere Reihenfolge.

Beispiel:

```css
#app .card a {
  color: red;
}

.card a {
  color: blue;
}
```

Die zweite Regel kommt später, hat aber eine geringere Spezifität.

Mit Layers kommt eine weitere Dimension dazu:

```css
@layer vendor, app;

@layer vendor {
  #app .card a { color: red; }
}

@layer app {
  .card a { color: blue; }
}
```

Bei normalen Deklarationen hat die spätere Layer-Priorität Vorrang, bevor Spezifität zwischen Regeln derselben relevanten Ebene verglichen wird.

## Diagnose im Browser

Im DevTools-Styles-Panel nicht nur auf die durchgestrichene Regel schauen. Prüfe, **welche Dimension gewonnen hat**: `!important`, Layer, Inline-Style, Spezifität oder Reihenfolge.

## Nicht sofort Spezifität hochrüsten

Noch ein ID-Selektor oder `!important` löst den aktuellen Konflikt, macht das nächste Überschreiben aber schwerer. Besser ist ein bewusstes Kaskadenmodell mit niedriger Spezifität und klaren Layers.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity