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

Styliser plusieurs éléments avec des caractères génériques en CSS

Lorsque vous stylisez des éléments avec des identifiants uniques, il peut devenir fastidieux de créer des classes distinctes pour chacun. CSS fournit une solution élégante avec le caractère générique *.

Utilisation de caractères génériques pour les classes

Dans votre exemple, vous avez plusieurs divs avec deux classes chacune, une classe commune ( tocolor) et un identifiant individuel (par exemple, tocolor-1). Pour les styliser avec une seule classe, vous pouvez utiliser la syntaxe générique suivante :

.tocolor-* {
  background: red;
}

Cependant, comme vous l'avez découvert, cette méthode ne fonctionne pas en CSS.

Sélecteurs d'attributs à la rescousse

La bonne approche consiste à utiliser des sélecteurs d'attributs, qui vous permettent de sélectionner des éléments en fonction de la valeur de leurs attributs. Dans ce cas, vous pouvez utiliser l'attribut class :

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] sélectionne les éléments dont l'attribut class commence par "tocolor-".
• [class*=" tocolor-"] sélectionne les éléments dont l'attribut de classe contient "tocolor-".

Dans votre exemple, les deux conditions correspondraient aux divs avec les classes tocolor-1, tocolor-2, etc.

Démo et plus d'informations

Vous pouvez voir une démonstration en direct de cette solution à :

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

Pour plus d'informations sur les sélecteurs d'attributs CSS, reportez-vous à ce qui suit ressources :

• [Attribut CSS Sélecteurs](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN Docs : Sélecteurs d'attributs](https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selectors)

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!