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

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:

#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:

@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