Pourquoi mon CSS `text-decoration: none;` ne remplace-t-il pas les éléments imbriqués ?

Dépannage du remplacement de la décoration de texte CSS

Votre inquiétude concernant votre code CSS qui ne remplace pas la propriété de décoration de texte est un défi courant rencontré par beaucoup programmeurs. Examinons le problème et trouvons une solution.

La clé pour comprendre le problème réside dans le comportement de la décoration du texte, qui diffère des autres propriétés liées aux polices comme le poids de la police. Lorsqu'elle est appliquée, la décoration de texte affecte tous les éléments imbriqués, quelle que soit leur spécificité. Ceci est expliqué dans la spécification W3C :

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

Dans votre code, le text-decoration: none; La règle, qui doit empêcher le soulignement, est appliquée aux éléments li avec la classe u. Cependant, comme la décoration de texte affecte également les éléments imbriqués, le soulignement reste dans les éléments li imbriqués avec la classe u.

Pour résoudre ce problème, vous pouvez utiliser une combinaison de spécificité CSS et d'imbrication :

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: line-through; /* Apply a different line-through style */
}
ul > li > ul > li.u {
    text-decoration: underline;
}

En utilisant cette approche, le style line-through est appliqué aux éléments li imbriqués sans affecter les éléments li externes. Alternativement, vous pouvez également utiliser explicitement la propriété d'héritage pour définir la décoration du texte pour les éléments imbriqués :

ul > li > ul {
    text-decoration: inherit;
}

N'oubliez pas que lors du dépannage des problèmes CSS, comprendre le comportement des propriétés et les règles de spécificité peut vous aider à trouver des solutions efficaces. solutions.

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!