Pourquoi la décoration de texte n'hérite-t-elle pas correctement en CSS ?

Problème de remplacement de la décoration de texte CSS

Dans la hiérarchie des propriétés CSS, les propriétés spécifiques ont priorité sur les propriétés héritées des éléments parents. Cependant, la propriété text-decoration présente une exception à cette règle.

Problème :

Considérez le code suivant :

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

Comme démontré dans ce [démo](http://jsfiddle.net/5t9sV/), la propriété text-decoration de l'élément enfant span ne remplace pas la décoration soulignée du parent a element.

Raison :

Selon la spécification CSS, la propriété text-decoration des éléments descendants "ne peut avoir aucun effet sur la décoration de l'ancêtre." Cela signifie essentiellement que les décorations de texte sont appliquées sur l'ensemble de l'élément, quels que soient les éléments enfants présents.

Solution :

En CSS3, il existe une propriété appelée text-decoration-skip qui peut être appliqué à l'élément enfant pour ignorer la décoration de texte héritée. Cependant, cela ne fonctionne que pour les éléments en ligne (par exemple, span) et les navigateurs pris en charge peuvent varier.

Par exemple, pour faire apparaître le texte à l'intérieur de l'élément span sans souligner, vous pouvez ajouter :

span {
  text-decoration-skip: ink;
}

Notez que ink est l'un des les valeurs possibles pour text-decoration-skip, qui inclut les caractères, les espaces et les objets incorporés.

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!