Puis-je styliser les ancres en fonction de leur contenu en utilisant CSS ?

Règle CSS basée sur le contenu

Le CSS peut-il être utilisé pour appliquer un style distinct aux ancres qui contiennent un mot spécifique ?

Réponse

Malheureusement, le CSS pur n'offre pas de solution native pour styliser les éléments en fonction de leur contenu. Le sélecteur ':contains' proposé ne fait pas partie de la version de travail actuelle des sélecteurs CSS3.

Solution de contournement JavaScript

Pour obtenir cette fonctionnalité, JavaScript peut être utilisé. Par exemple, l'extrait de code suivant parcourt tous les liens du document et applique une couleur rouge à toute ancre dont le contenu correspond à la chaîne "SpecificWord" :

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

Cet exemple HTML démontre l'effet du script :

<a href="#">SpecificWord</a>
<a href="#">OtherWords</a>

Lors de l'exécution, la première ancre sera stylisée avec une couleur rouge, tandis que la seconde conservera son style par défaut.

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!