jokertegn * i CSS for klasser

Jeg har disse divs, som jeg styler med .tocolor, men jeg har også brug for den unikke identifikator 1,2,3,4 osv., så jeg tilføjer den som en anden klasse 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;
}

Er der en måde at have kun 1 klasse tocolor-*. Jeg prøvede at bruge et wildcard * som i dette css, men det virkede ikke.

.tocolor-*{
  background: red;
}
Leandro
Redigeret spørgsmål 2013ør august 2013 в 1:14
Programmering
css wildcard css-selectors
2011ør februar 2011 в 8:46
13 visninger
Løsning

Det, du har brug for, kaldes attributvælger. Et eksempel, hvor du bruger din html-struktur, er følgende:

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

I stedet for div kan du tilføje et hvilket som helst element eller fjerne det helt, og i stedet for class kan du tilføje en hvilken som helst attribut til det angivne element.

[class^="tocolor-"] - starter med "tocolor-".
[class*=" tocolor-"] - indeholder delstrengen "tocolor-", der forekommer direkte efter et mellemrum.

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

Flere oplysninger om CSS-attribut-selektorer kan du finde her og her. Og fra MDN Docs MDN Docs

davidhartman00
Redigeret svar 2018ør november 2018 в 12:29
Kommentarer (5)

Ja, det kan du.

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

Dette vil vælge alle id'er, der starter med 'term-'.

Hvad angår grunden til ikke at gøre dette, kan jeg se hvor det ville være at foretrække at vælge på denne måde; hvad angår stil, ville jeg ikke selv gøre det, men det er muligt.

user3071284
Redigeret svar 2017ør februar 2017 в 4:27
Kommentarer (1)

Hvis du ikke har brug for den unikke identifikator til yderligere styling af div'erne og bruger HTML5, kan du prøve at bruge brugerdefinerede dataattributter. Læs videre her eller prøv at søge på Google efter HTML5 Custom Data Attributes.

Kommentarer (0)