Question wildcard * en CSS pour les classes


J'ai ces divs que je suis en train de coiffer .tocolor, mais j'ai aussi besoin de l'identifiant unique 1,2,3,4 etc, donc je l'ajoute comme une autre classe tocolor-1.

<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>

.tocolor{
  background: red;
}

Y at-il un moyen d'avoir seulement 1 classe tocolor-*. J'ai essayé d'utiliser un caractère générique * comme dans ce css, mais cela n'a pas fonctionné.

.tocolor-*{
  background: red;
}

539
2018-02-24 20:46


origine


Réponses:


Ce dont vous avez besoin est appelé sélecteur d'attribut. Un exemple, utilisant votre structure html, est le suivant:

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

À la place de div vous pouvez ajouter n'importe quel élément ou le supprimer complètement, et à la place de class vous pouvez ajouter n'importe quel attribut de l'élément spécifié.

[class^="tocolor-"] - commence par "tocolor-".
[class*=" tocolor-"] - contient la sous-chaîne "tocolor-" apparaissant directement après un caractère espace.

Démonstration  http://jsfiddle.net/K3693/1/

Plus d'informations sur les sélecteurs d'attributs CSS, vous pouvez trouver ici et ici.


988
2018-02-24 20:53



Oui, vous pouvez cela.

*[id^='term-']{
    [css here]
}

Cela sélectionnera tous les ID commençant par 'term-'.

Quant à la raison de ne pas le faire, je vois où il serait préférable de choisir de cette façon; quant au style, je ne le ferais pas moi-même, mais c'est possible.


91
2018-04-17 21:45



Une solution alternative:

div[class|='tocolor'] correspondra aux valeurs de l'attribut "class" commençant par "tocolor-", y compris "tocolor-1", "tocolor-2", etc.

Méfiez-vous que cela ne correspondra pas `

Référence: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Représente un élément avec l'attribut att, sa valeur étant soit exactement "val" soit commençant par "val" immédiatement suivi de "-" (U + 002D)


21
2018-02-20 23:03



Si vous n'avez pas besoin de l'identifiant unique pour un style supplémentaire des divs et que vous utilisez HTML5, vous pouvez essayer d'utiliser des attributs de données personnalisés. Continuer à lire ici ou essayez une recherche google pour HTML5 Custom Data Attributes


3
2018-02-24 20:55