Warum tritt die Vererbung von Selektoren in CSS auf?

Vererbung in CSS tritt auf, weil Style-Eigenschaften von Elternelementen an ihre Kindelemente weitergegeben werden können. Dies ist in der CSS-Spezifikation festgelegt, um die Stilgestaltung zu vereinfachen und Code-Wiederholungen zu vermeiden.

Nicht alle CSS-Eigenschaften werden vererbt. Hier einige Beispiele für vererbbare und nicht vererbbare Eigenschaften:

Vererbbare Eigenschaften	Nicht vererbbare Eigenschaften
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Der Vererbungsmechanismus wird vom Browser basierend auf der Hierarchie der Elemente im HTML-Dokument (DOM-Baum) bestimmt. Wenn einem Kindelement kein expliziter Wert für eine vererbbare Eigenschaft zugewiesen ist, erbt es den Wert seines nächstgelegenen Vorfahren, bei dem diese Eigenschaft definiert ist.

/* Setze die Farbe auf Rot */
body {
  color: red;
}

/* Alle Kindelemente des body, die keine eigene color-Eigenschaft haben, werden rot sein */
p {
  /* Dieses Paragraph wird rot sein */
}

/* Überschreibe die color-Eigenschaft für ein spezielles Element */
div {
  color: blue;
}

/* Das Paragraph innerhalb dieses Divs wird blau sein */
div p {
  /* Dieses Paragraph wird blau sein */
}

Durch die Verwendung der Vererbung können allgemeine Stile für große Inhaltsblöcke festgelegt werden, die automatisch von den Kindelementen übernommen werden, sofern nicht anders angegeben. Dies erhöht die Wartbarkeit und Lesbarkeit des Codes.