Héritage des propriétés CSS: une spécificité énigma

Lors de l'application des règles CSS aux éléments Web, le concept de spécificité joue un rôle crucial dans la détermination de quelle règle prévoit. Cependant, le traitement des propriétés héréditaires dans ce contexte soulève souvent des questions.

Les styles hérités sont des propriétés transmises d'un élément parent à ses descendants. Il est raisonnable de se demander comment la spécificité des propriétés héréditaires se compare à celle des règles directement ciblées.

spécificité et héritage

Contrairement à la croyance populaire, la spécificité ne régit pas directement la priorité des propriétés héréditaires. Au lieu de cela, la spécificité de toute déclaration CSS ciblant l'élément remplace directement toute propriété héritée.

Exemple: Overriver les styles héréditaires

considérer le HTML et CSS CODS suivant:

This should be black

    
This should be red

.all_red_text { color: red; }

Dans ce cas, les éléments H2 dans le div .all_rext héritent le comportement du navigateur par défaut d'être noir. La couleur: rouge; la propriété dans .all_red_text remplace ce style hérité, et le texte apparaît rouge.

Cependant, si nous ajoutons une règle ciblant directement l'élément H2, comme vu ci-dessous:

h2 { color: black; }
.all_red_text { color: red; }

Dans cet exemple révisé, la couleur: noir; La règle explicitement pour les éléments H2 prit la priorité sur la propriété héritée, ce qui résulte en tout le texte H2. La spécificité d'une règle directement ciblée a toujours une priorité plus élevée, que la propriété héritée provient d'un élément parent ou de l'agent utilisateur. Comprendre ce comportement est essentiel pour éviter les résultats inattendus lorsque vous travaillez avec des styles héréditaires dans CSS.