Pourquoi ma « text-decoration » CSS ne fonctionne-t-elle pas comme prévu sur les éléments imbriqués ?

Traitement des bizarreries de décoration de texte CSS

En CSS, la propriété text-decoration joue un rôle crucial dans le style des éléments de texte. Cependant, l'application de la décoration de texte peut ne pas toujours se comporter comme prévu. Cet article explore les complexités de la décoration de texte CSS et fournit une solution à un problème courant.

Le problème

Un développeur a rencontré une situation déroutante où les règles CSS en ligne pour la décoration du texte semblait n'avoir aucun effet sur les éléments imbriqués. Ils avaient écrit le code 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 CSS devait souligner uniquement les éléments li avec la classe "u" et laisser tous les autres éléments li sans décoration. Cependant, dans la pratique, tous les éléments li étaient soulignés.

La solution

Le problème réside dans le comportement unique de la décoration de texte. Contrairement à d'autres propriétés de style de texte telles que font-weight, la décoration de texte affecte non seulement l'élément auquel elle est appliquée mais également ses éléments descendants.

Conformément à la spécification CSS 2.1, la décoration de texte est dessinée sur l'ensemble de l'élément, quel que soit l'élément. de tous les éléments descendants. Cela signifie que définir text-decoration sur un élément parent propagera la décoration à ses enfants, même s'ils ont leurs propres règles de décoration de texte.

Dans l'exemple fourni, text-decoration: none; la règle sur les deuxième et troisième sélecteurs n'était pas efficace car la décoration était déjà propagée à partir du premier sélecteur.

Conclusion

Comprendre cette bizarrerie dans la décoration de texte CSS est essentiel pour éviter des résultats inattendus. En appliquant la décoration de texte uniquement aux éléments les plus externes et en s'appuyant sur l'héritage pour les éléments imbriqués, les développeurs peuvent garantir que leurs règles de décoration de texte CSS se comportent comme prévu.

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!