Pourquoi les sélecteurs en CSS sont-ils surhérités?

Les sélecteurs en CSS ne sont pas hérités. L'héritage en CSS concerne la transmission de certaines propriétés d'un élément à ses descendants. Les sélecteurs sont des modèles qui choisissent les éléments pour appliquer des styles.

L'héritage peut signifier que les styles appliqués via un sélecteur peuvent être écrasés (hérités) par des styles appliqués via un autre sélecteur. Cela n'est pas lié à l'héritage, mais au mécanisme de cascade de CSS, qui détermine quels styles s'appliquent à un élément lorsque plusieurs règles CSS définissent une valeur pour la même propriété.

Facteurs influençant la cascade et la "surcharge" des styles :

1. Spécificité (Specificity) : Les sélecteurs avec une spécificité plus élevée ont un poids supérieur.
2. Ordre (Order) : En cas de spécificité égale, la règle déclarée en dernier est appliquée.
3. Importance (!important) : Les déclarations marquées avec !important ont la priorité maximale (sauf pour les styles intégrés du User Agent avec !important).
4. Sources de styles (Origin) : Les styles proviennent de différentes sources (navigateur, utilisateur, auteur).

Exemple de spécificité :

/* Spécificité faible */
p {
  color: blue;
}

/* Spécificité élevée - écrasera la couleur */
.text-section p {
  color: red;
}