Les éléments de style CSS3 peuvent-ils être basés sur le contenu ?

Comment appliquer des règles CSS basées sur le contenu

Il est courant d'appliquer un style spécifique aux éléments qui contiennent un certain mot ou phrase. Bien que le CSS moderne ait des capacités avancées, il existe un aspect spécifique qu'il ne peut pas gérer directement.

Les éléments de style CSS3 peuvent-ils être basés sur le contenu ?

La réponse simple est non. CSS3 n'inclut pas de sélecteur natif qui vous permet de styliser les éléments en fonction de leur contenu. Le sélecteur :contains proposé, qui aurait activé cette fonctionnalité, a été supprimé de la version de travail actuelle des sélecteurs CSS3.

Solutions alternatives

Pour obtenir un style basé sur le contenu , vous pouvez utiliser JavaScript. L'extrait suivant montre comment appliquer une couleur rouge aux ancres qui contiennent le mot "SpecificWord" :

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

Ce code JavaScript parcourt tous les éléments d'ancrage (document.links), vérifie si leur innerHTML contient l'élément souhaité. mot, et si c'est vrai, applique la couleur rouge.

En conclusion, bien que CSS ne prenne pas en charge nativement le style basé sur le contenu, vous pouvez utiliser JavaScript pour obtenir des résultats similaires. Cela vous permet de créer des règles de style précises pour les éléments qui répondent à des exigences de contenu spécifiques.

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!