Comment puis-je remplacer efficacement l'héritage de la décoration de texte CSS ?

Comprendre l'héritage de la décoration de texte CSS

En CSS, remplacer la décoration de texte peut être un défi. Lorsqu'un élément parent avec un style de décoration de texte est appliqué, il hérite de sa décoration à tous ses éléments enfants. Cela peut prêter à confusion lorsque vous essayez de contrôler la décoration d'éléments spécifiques.

Le cas de la substitution de la décoration de texte

Considérez l'exemple fourni, où le CSS suivant est utilisé :

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

Et le HTML est le suivant :

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Ici, le comportement attendu est que le les éléments de liste imbriqués ne recevraient aucune décoration, tandis que les éléments parents avec la classe u seraient soulignés. Cependant, le résultat montre que tous les éléments de la liste sont soulignés.

L'explication

La raison de ce comportement réside dans la nature de la décoration du texte CSS. Contrairement aux autres propriétés de police, la décoration de texte s'applique à l'élément entier, y compris à tous les éléments imbriqués. Cela signifie que la décoration définie dans le conteneur parent s'applique de manière récursive à ses enfants, quels que soient leurs propres styles de décoration de texte.

Ce comportement est documenté dans la spécification CSS21 :

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element.

Conclusion

Remplacer la décoration du texte en CSS nécessite de comprendre ce comportement d'héritage. Pour s'assurer que des éléments spécifiques n'héritent pas de la décoration de leur parent, il est nécessaire de définir text-decoration : none pour chaque niveau de l'imbrication.

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!