Comment puis-je souligner des liens de manière sélective tout en excluant des éléments Span spécifiques ?

Style des liens et des éléments étendus pour un soulignement distinct

Lorsque vous travaillez avec HTML et CSS, il est souvent nécessaire de styliser les liens et d'étendre les éléments différemment en termes de décoration de texte. Dans certains cas, vous souhaiterez peut-être supprimer le soulignement d’un élément span spécifique dans un lien. Cependant, cela peut être difficile avec les sélecteurs CSS traditionnels.

La question en question vise à y parvenir, où le lien doit être souligné, à l'exception d'un élément avec l'ID "#myspan". Initialement, les règles CSS fournies semblent n'avoir aucun effet sur "#myspan", mais le problème survient lorsque l'ordre de style est inversé, en soulignant "#myspan" mais pas le lien.

Solution : Style en ligne

Pour résoudre ce problème, une simple modification CSS est requise. En rendant l'élément inline-block, il est isolé de l'effet de soulignement du lien :

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display: inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

Ce code CSS garantit que le lien est souligné tandis que l'élément "#myspan" reste souligné. De plus, la couleur de "#myspan" peut être personnalisée avec les règles CSS comme vous le souhaitez.

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!