Waarom worden CSS-selectors overerfd?

CSS-selectors worden niet geërfd. Erfelijkheid in CSS verwijst naar het doorgeven van bepaalde eigenschappen van een element aan zijn nakomelingen. Selectors zijn patronen die elementen kiezen waarop stijlen worden toegepast.

Erfelijkheid kan betekenen dat stijlen die met één selector zijn toegepast, kunnen worden overschreven (geërfd) door stijlen die met een andere selector zijn toegepast. Dit heeft niets te maken met erfelijkheid, maar met het cascade-mechanisme van CSS, dat bepaalt welke stijlen op een element worden toegepast wanneer meerdere CSS-regels een waarde voor dezelfde eigenschap instellen.

Factoren die de cascade en "overschrijving" van stijlen beïnvloeden:

1. Specificiteit (Specificity): Selectors met een hogere specificiteit wegen zwaarder.
2. Volgorde (Order): Bij gelijke specificiteit wordt de laatst gedefinieerde regel toegepast.
3. Belangrijkheid (!important): Verklaringen gemarkeerd met !important hebben de hoogste prioriteit (behalve ingebedde stijlen van de User Agent met !important).
4. Stijlbronnen (Origin): Stijlen komen uit verschillende bronnen (browser, gebruiker, auteur).

Voorbeeld van specificiteit:

/* Lage specificiteit */
p {
  color: blue;
}

/* Hoge specificiteit - overschrijft de kleur */
.text-section p {
  color: red;
}