Wie entscheiden Kaskade und Vererbung, welche Stile angewendet werden?

Question

Accepted Answer

Wenn mehrere Regeln ein Element gestalten könnten, entscheiden zwei Mechanismen das Ergebnis: die **Kaskade** (welche Regel gewinnt) und die **Vererbung** (welche Eigenschaften von Eltern weitergegeben werden).

## Die Kaskade — Konflikte auflösen, der Reihe nach

Der Browser wählt die gewinnende Deklaration aus, indem er nach Prioritätsreihenfolge prüft:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Vererbung — einige Eigenschaften geben an Kinder weiter

Bestimmte Eigenschaften (hauptsächlich **textbezogene**) werden von Nachkommen automatisch vererbt; die meisten nicht.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Vererbt** standardmäßig: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Nicht vererbt**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Vererbung explizit steuern

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Spezifitätsübersicht in der Kaskade

Dies ist der Grund, warum eine Low-Specificity-Regel verlieren kann, selbst wenn sie später geschrieben wird — Spezifität wird *vor* der Quellreihenfolge geprüft. Das Verständnis der Reihenfolge (Wichtigkeit → Spezifität → Quellreihenfolge) erklärt fast jeden "mein Stil wird nicht angewendet"-Fall.

## Warum es wichtig ist

Die Kaskade und Vererbung sind das Kernmodell von *wie CSS tatsächlich auflöst*.

Die Kenntnis der Prioritätsreihenfolge debuggt Konflikte, das Wissen, welche Eigenschaften vererbt werden, ermöglicht es Ihnen, `color`/`font` einmal auf `body` statt überall zu setzen, und `inherit`/`initial`/`unset` geben Ihnen genaue Kontrolle — zusammen machen sie CSS vorhersehbar statt magisch.