Vererbung in CSS

Die Vererbung von Eigenschaften erfolgt von außen nach innen, von allgemein zu spezifisch und abhängig von Reihenfolge bei gleichen Deklarationen.

Mit dem Schlüsselwort inherit kann die Vererbung erzwungen werden, da nicht immer alle Eigenschaften automatisch mitvererbt werden.

Um die Darstellung eines Elements herauszufinden, berechnet der Browser die Spezifität der verschiedenen Anweisungen. 

/* Alle Elemente (*) innerhalb von .example erhalten roten Hintergrund */
section .example * {
    background: rgba(255, 0, 0, .2);
    /* halbtransparent: bei Verschachtelung überlagern sich die Ebenen,
       das Rot wird mit jeder Tiefe stärker */
}

Der Selektor section .example * wählt alle Nachfahren von .example aus und setzt deren Hintergrund auf ein halbtransparentes Rot. Da jedes verschachtelte Element diese Farbe erbt und sie sich überlagern, wird das Rot mit jeder Verschachtelungsebene intensiver:

Kaskade: Hintergrundfarbe in jedem Kind-Element

Beispiel: Hintergrundfarbe transparent-rot für alle Elemente in .example

Da die Hintergrundfarbe halbtransparent gesetzt ist, entsteht bei verschachtelten Elementen, die diese halbtransparente Hintergrundfarbe erben, ein Überlagerungseffekt und das Rot wird entsprechend stärker

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ein Link

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ein Link mit etwas Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Vererbung: ausnutzen!

Im Grunde geht es bei CSS darum, so wenig Regeln wie möglich wiederholen zu müssen. Ziel ist es, zuerst eine vernünftige Ausgangslage schaffen indem Standards festgelegt werden, z.B.