Comment l'héritage de décoration de texte CSS fonctionne-t-il avec les éléments enfants ?

Problèmes de remplacement de la propriété CSS text-decoration

En HTML et CSS, la propriété text-decoration est utilisée pour ajouter ou supprimer des décorations, telles que comme soulignement ou barré, aux éléments de texte. Cependant, lorsqu'un élément enfant contient sa propre propriété text-decoration, la question se pose de savoir si la propriété enfant peut remplacer la propriété héritée du parent.

Considérez cet exemple CSS :

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

Dans ce cas, le champ l'élément n'hérite pas de la propriété text-decoration de l'élément parent et applique à la place sa propre text-decoration: none; valeur. Ce résultat est attendu car la propriété text-decoration a été spécifiée sur les éléments parents et enfants.

Selon la spécification CSS text-decoration, la propriété text-decoration sur les éléments enfants ne peut avoir aucun effet sur le décoration de l'ancêtre. Cela signifie que la décoration de texte de l'élément parent sera toujours appliquée, quelle que soit la valeur de l'enfant.

La question liée fournit également des informations supplémentaires sur la spécification, indiquant que « Les décorations de texte sur les boîtes en ligne sont dessinées sur l'ensemble de l'élément. , traversant tous les éléments descendants sans prêter aucune attention à leur présence. Cela implique que la décoration du texte du parent sera toujours appliquée sur l'ensemble de la boîte en ligne, y compris tous les éléments enfants.

Dans les versions CSS ultérieures (après 2.1), la propriété text-decoration-skip a été introduite pour répondre ce problème. En définissant text-decoration-skip: skip sur l'élément enfant, cela peut forcer la décoration du parent à ignorer le contenu de l'enfant.

En conclusion, la propriété text-decoration ne peut pas être remplacée par les éléments enfants en raison de la conception du cahier des charges. Pour contrôler la décoration du texte sur des parties spécifiques d'un élément, la propriété text-decoration-skip peut être utilisée dans les versions CSS ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!