Comment puis-je styliser efficacement des éléments avec des noms de classe similaires en CSS ?

Utilisation de caractères génériques en CSS pour les classes : * et les sélecteurs d'attributs

Lorsque vous stylisez des éléments avec plusieurs classes qui suivent un modèle spécifique, il peut être fastidieux de créer des règles distinctes pour chaque variante. C'est là que les caractères génériques CSS entrent en jeu.

Dans votre cas, vous souhaitez appliquer une couleur d'arrière-plan à plusieurs éléments avec des noms de classe comme "tocolor-1", "tocolor-2", "tocolor-3" , etc. Bien que l'utilisation d'un caractère générique comme ".tocolor-*" puisse sembler une solution, cela ne fonctionne pas en CSS.

Au lieu de cela, vous pouvez exploiter les sélecteurs d'attributs pour atteindre cet objectif. Un sélecteur d'attribut vous permet de cibler des éléments en fonction de leurs attributs, comme la classe.

[class^="tocolor-"], [class*=" tocolor-"] {
  background: red;
}

Dans ce code, le sélecteur d'attribut [class^="tocolor-"] cible les éléments dont l'attribut de classe commence par " tocolor-", faisant correspondre efficacement tous les éléments avec des noms de classe comme "tocolor-1", "tocolor-2", etc.

Le sélecteur [class*=" tocolor-"] cible les éléments dont l'attribut de classe contient la sous-chaîne "tocolor-" suivie d'un caractère espace. Cela correspond à des éléments comme "tocolor-highlight", "my-class tocolor-blue", etc.

En utilisant des sélecteurs d'attributs, vous pouvez appliquer des styles à un groupe d'éléments en fonction de leur modèle partagé, sans avoir besoin pour les déclarations de classe verbeuses et répétitives.

Pour plus d'informations sur les sélecteurs d'attributs CSS, reportez-vous aux ressources suivantes :

• [CSS Sélecteurs d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [Sélecteurs d'attributs CSS](https://www.w3schools.com/cssref/ css_selectors.asp)

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!