Comment puis-je styliser plusieurs divisions avec des noms de classe similaires à l'aide de sélecteurs CSS ?

Utilisation de caractères génériques dans les classes CSS

Dans votre requête, vous souhaitez styliser plusieurs div avec la classe commune "tocolor" tout en incluant des identifiants uniques (par exemple, tocolor-1 , tocolor-2). Vous avez tenté de simplifier cela en utilisant le caractère générique "*" en CSS, mais cela n'a pas abouti.

Pour obtenir le résultat souhaité, nous introduisons des sélecteurs d'attributs en CSS. Les sélecteurs d'attributs vous permettent de cibler des éléments en fonction d'attributs spécifiques, tels que leur valeur de classe.

Pour votre scénario, vous pouvez utiliser le sélecteur CSS suivant :

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

Voici comment cela fonctionne :

• [class^="tocolor-"] : Ce sélecteur correspond aux éléments dont l'attribut de classe commence par "tocolor-".
• [class*=" tocolor-"] : ce sélecteur correspond aux éléments dont l'attribut de classe contient "tocolor-" n'importe où dans la chaîne, précédé d'un caractère espace.

En combinant ces deux sélecteurs, vous pouvez cibler n'importe quel élément avec une classe qui remplit l'un ou l'autre de ces critères.

Par exemple, étant donné le HTML suivant structure :

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

L'application du sélecteur CSS ci-dessus définira la couleur de tous ces divs sur rouge.

Découvrez cette démo interactive sur JSFiddle : http://jsfiddle.net/K3693 /1/

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

• Sélecteurs d'attributs CSS (W3Schools) : https://www.w3schools.com/cssref/css_selectors.asp
• Sélecteurs d'attributs (MDN Web Docs) : 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!