Pourquoi « text-decoration : none » ne supprime-t-il pas toujours les décorations de texte dans les éléments CSS imbriqués ?

Comprendre le remplacement de la décoration de texte CSS

En CSS, la propriété text-decoration permet l'ajout ou la suppression d'effets de texte tels que le soulignement ou barrés. Cependant, vous pouvez rencontrer des situations dans lesquelles vos tentatives de remplacement pour supprimer la décoration du texte ne semblent pas efficaces. En effet, la décoration de texte se comporte différemment des autres propriétés de style de texte comme font-weight.

Propagation des éléments imbriqués

La clé pour comprendre ce comportement réside dans la propagation de styles de décoration de texte. Lorsque vous appliquez une décoration de texte à un élément, cela affectera non seulement cet élément mais également tous les éléments imbriqués qu'il contient. Cela signifie que la définition de text-decoration: none sur un élément parent supprimera uniquement la décoration de l'élément parent lui-même, mais tous les éléments enfants hériteront de la décoration du parent.

Exemple

Dans l'exemple fourni, vous avez le 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;
}

Et le suivant HTML :

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

L'application de ce CSS au HTML entraînera que les éléments de liste imbriqués (

dans

) recevront également une décoration de texte, même si vous avez explicitement défini la décoration de texte : aucun sur ces éléments. En effet, le parent li (avec la classe "u") hérite de sa décoration de texte à ses éléments enfants.

Pour supprimer la décoration des éléments de liste imbriqués, vous devez spécifier text-decoration : none sur chacun niveau de nidification. Cela ressemblerait à :

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: none; /* Added */
}

Considérations supplémentaires

Gardez à l'esprit que le comportement du navigateur peut varier en ce qui concerne la propagation de la décoration de texte. Certains navigateurs interprètent la spécification plus strictement et l'appliquent comme décrit ci-dessus, tandis que d'autres peuvent propager la décoration même avec text-decoration : none définie sur les éléments descendants.

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!