Pouvez-vous styliser les ancres en fonction de leur contenu en utilisant du CSS pur ?

Style d'ancres basé sur le contenu à l'aide de CSS

Pouvez-vous appliquer un style distinct aux ancres contenant un mot spécifique en utilisant du CSS pur ? Bien que la proposition du sélecteur :contains ait été envisagée dans le passé, elle ne fait actuellement pas partie de la spécification officielle des sélecteurs CSS3.

Solution :

Puisque le CSS pur n'a pas le possibilité de cibler les ancres en fonction de leur contenu, JavaScript devient la solution alternative.

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

Ce script parcourra tous les liens sur une page et vérifiez si elles contiennent la chaîne "SpecificWord" n'importe où dans leur contenu HTML. Si une correspondance est trouvée, la couleur du lien sera définie sur rouge, comme spécifié dans la propriété style.

Utilisation :

Pour utiliser cette solution, vous pouvez intégrer le script dans une page HTML. Voici un exemple :

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

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

Ce script rendra le premier élément d'ancrage rouge, car il contient la chaîne "SpecificWord".

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!