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

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

DDD

Libérer： 2024-12-15 05:10:12

original

118 Les gens l'ont consulté

Why Doesn't `text-decoration: none` Always Remove Text Decorations in Nested CSS Elements?

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

Copier après la connexion

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>

Copier après la connexion

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

dans

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 */
}

Copier après la connexion

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!