Comment styliser les liens sans souligner des éléments spécifiques qu'ils contiennent ?

Styliser des liens sans mettre en évidence des éléments spécifiques

Lors du style de liens avec CSS, on peut être confronté au problème de ne pas pouvoir supprimer le soulignement d'un élément spécifique dans le lien . Cela peut être frustrant lorsque, par exemple, vous souhaitez mettre en évidence seulement une partie du lien.

Explication du problème

Dans l'extrait de code fourni :

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  text-decoration: none;
}

Le le but est de souligner tous les liens à l'exception de l'élément avec l'ID #myspan. Cependant, malgré la définition de text-decoration: none; sur un #myspan, il reste souligné. La raison en est que les règles de priorité CSS accordent une priorité plus élevée au sélecteur parent (a) qu'au sélecteur plus spécifique (un #myspan). Par conséquent, le soulignement de a remplace la décoration du texte : none ; règle sur #myspan.

Solution

Pour résoudre ce problème, nous pouvons changer la propriété d'affichage de #myspan en inline-block :

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

En créant #myspan un élément inline-block, nous supprimons sa relation avec l'élément a concernant la décoration du texte. Par conséquent, le soulignement ne sera pas appliqué à #myspan.

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!