Comment fonctionne l'héritage de décoration de texte CSS et pourquoi sa substitution échoue-t-elle parfois ?

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

En CSS, la propriété text-decoration régit les styles de lignes décoratives appliqués au texte. Cependant, contrairement à d'autres styles liés au texte tels que font-weight, la décoration de texte se comporte distinctement.

Le problème lié au remplacement de la décoration héritée

Considérez le code CSS suivant :

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;
}

Ce code est destiné à empêcher l'application d'une décoration héritée aux éléments de liste imbriqués. Cependant, la structure HTML ci-dessous révèle un résultat inattendu :

<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>

Explication

Le problème réside dans le fait que la décoration de texte s'applique à tous les éléments imbriqués dans le élément auquel il est appliqué. Cela signifie que même si vous tentez de remplacer la décoration héritée sur les éléments imbriqués, la décoration héritée sera toujours appliquée.

Selon la spécification CSS 2.1, « la décoration de texte sur les boîtes en ligne est dessinée sur tout l'élément , traversant tous les éléments descendants sans prêter aucune attention à leur présence."

Solution

Pour résoudre ce problème problème, une approche différente est nécessaire. Au lieu de vous fier à des sélecteurs imbriqués pour remplacer la décoration héritée, utilisez une technique alternative telle que :

• Utiliser les pseudo-éléments ::before ou ::after pour créer des lignes décoratives
• Utiliser JavaScript pour modifier dynamiquement la propriété text-decoration
• Appliquer la propriété text-decoration directement aux éléments souhaités sans s'appuyer sur héritage

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!