Comment puis-je styliser des éléments avec plusieurs identifiants uniques à l'aide de caractères génériques et de sélecteurs d'attributs CSS ?

Styler des éléments avec plusieurs identifiants uniques à l'aide de caractères génériques en CSS

Dans le développement frontend, il est souvent nécessaire de styliser les éléments en fonction à la fois d'une classe commune et d'identifiants uniques. Considérez le scénario suivant :

Nous avons plusieurs div que nous souhaitons styliser avec un fond rouge en utilisant la classe ".tocolor". Cependant, nous devons également identifier de manière unique chaque div avec un numéro (par exemple, tocolor-1, tocolor-2, tocolor-3).

Au départ, nous avons essayé d'utiliser des caractères génériques pour simplifier le style, comme indiqué ci-dessous :

.tocolor-* {
  background: red;
}

Cependant, cette méthode n'a pas fonctionné. La solution à ce problème réside dans les sélecteurs d'attributs CSS. En ciblant l'attribut de classe d'un élément, nous pouvons styliser les éléments en fonction de modèles spécifiques.

Sélecteurs d'attribut pour le style avec des caractères génériques

Il existe deux types de sélecteurs d'attribut qui peuvent être utilisés dans ce scénario :

• [attribute^="value"] : Correspond aux éléments dont l'attribut commence par le spécifié value.
• [attribute*="value"] : Correspond aux éléments dont l'attribut contient la valeur spécifiée.

Pour la structure HTML donnée :

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

Nous pouvons utiliser l'attribut suivant sélecteurs :

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

• [class^="tocolor-"] : Correspond à tous les div dont l'attribut de classe commence par "tocolor-".
• [class*=" tocolor-"] : Correspond à tous les div dont l'attribut de classe contient la sous-chaîne "tocolor-".

Utilisation et démonstration

En utilisant ces sélecteurs d'attributs, nous pouvons efficacement styliser les éléments en fonction à la fois de la classe commune ".tocolor" et des identifiants uniques, comme indiqué dans la démo suivante :

[Live Démo](http://jsfiddle.net/K3693/1/)

Ressources pour un apprentissage ultérieur

• Sélecteurs d'attributs CSS : https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• MDN Docs sur les sélecteurs d'attribut : 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!