carattere jolly * nel CSS per le classi

Ho questi div che sto stilizzando con .tocolor, ma ho anche bisogno dell'identificatore unico 1,2,3,4 ecc. quindi lo aggiungo come un'altra 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;
}

C'è un modo per avere solo 1 classe tocolor-*. Ho provato ad usare un carattere jolly * come in questo css, ma non ha funzionato.

.tocolor-*{
  background: red;
}
Leandro
Domanda modificata 1º agosto 2013 в 1:14
Programmazione
css wildcard css-selectors
24º febbraio 2011 в 8:46
12 visualizzazioni
Soluzione

Quello di cui hai bisogno si chiama selettore di attributi. Un esempio, usando la vostra struttura html, è il seguente:

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

Al posto di div puoi aggiungere qualsiasi elemento o rimuoverlo del tutto, e al posto di class puoi aggiungere qualsiasi attributo dell'elemento specificato.

[class^="tocolor-"] - inizia con "tocolor-".
[class*="tocolor-"] - contiene la sottostringa "tocolor-" che si verifica direttamente dopo uno spazio.

Demo: http://jsfiddle.net/K3693/1/

Ulteriori informazioni sui selettori di attributi CSS, si possono trovare qui e qui. E da MDN Docs MDN Docs

davidhartman00
Risposta modificata 22º novembre 2018 в 12:29
Commentari (5)

Sì, puoi farlo.

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

Questo selezionerà tutti gli id che iniziano con 'termine-'.

Per quanto riguarda la ragione per non farlo, capisco dove sarebbe preferibile selezionare in questo modo; per quanto riguarda lo stile, non lo farei io stesso, ma è possibile.

user3071284
Risposta modificata 9º febbraio 2017 в 4:27
Commentari (1)

Se non avete bisogno dell'identificatore unico per un ulteriore stile dei div e state usando HTML5, potreste provare ad usare i Data Attributes personalizzati. Continua a leggere qui o prova a fare una ricerca su Google per HTML5 Custom Data Attributes.

Commentari (0)