CSS'de sınıflar için joker karakter *

Bu divleri .tocolor ile şekillendiriyorum, ancak 1,2,3,4 vb. benzersiz tanımlayıcılara da ihtiyacım var, bu yüzden bunu başka bir sınıf tocolor-1 olarak ekliyorum.

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

Sadece 1 tocolor-* sınıfına sahip olmanın bir yolu var mı? Bu css'de olduğu gibi bir joker karakter * kullanmayı denedim, ancak işe yaramadı.

.tocolor-*{
  background: red;
}
Leandro
Edited question 2013ösp14ös13 Ağustos 2013 в 1:14
Programlama
css wildcard css-selectors
2011ösp46ös20 Şubat 2011 в 8:46
31 görünümler
Çözüm

İhtiyacınız olan şey öznitelik seçici olarak adlandırılır. Html yapınızı kullanarak bir örnek aşağıdaki gibidir:

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

divyerine herhangi bir öğe ekleyebilir veya tamamen kaldırabilirsiniz veclass` yerine belirtilen öğenin herhangi bir niteliğini ekleyebilirsiniz.

[class^="tocolor-"] - "tocolor-" ile başlar.
[class*=" tocolor-"] - bir boşluk karakterinden hemen sonra gelen "tocolor-" alt dizesini içerir.

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

CSS öznitelik seçicileri hakkında daha fazla bilgiyi burada ve burada bulabilirsiniz. Ve MDN Docs'dan MDN Docs

davidhartman00
Edited answer 2018ööp29öö24 Kasım 2018 в 12:29
Yorumlar (5)

Evet, bunu yapabilirsin.

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

Bu, 'term-' ile başlayan tüm kimlikleri seçecektir.

Bunu yapmamanın nedenine gelince, bu şekilde seçmenin tercih edilebileceği yerleri görüyorum; stil olarak, bunu kendim yapmazdım, ama mümkün.

user3071284
Edited answer 2017ösp27ös16 Şubat 2017 в 4:27
Yorumlar (1)

Div'lerin daha fazla şekillendirilmesi için benzersiz tanımlayıcıya ihtiyacınız yoksa ve HTML5 kullanıyorsanız, özel Veri Niteliklerini deneyebilirsiniz. Okumaya devam edin burada veya HTML5 Özel Veri Nitelikleri için bir google araması deneyin

Yorumlar (0)