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

670

Ben stil ile bu divs var .tocolor, ama aynı zamanda benzersiz bir tanımlayıcı 1,2,3,4 vb gerekir, bu yüzden başka bir sınıf olarak ekliyorum 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;
}

Sadece 1 sınıfa sahip olmanın bir yolu var mı tocolor-*? *Bu css gibi bir joker kullanmayı denedim , ama işe yaramadı.

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— heyecan
kaynak

1

İşte seçiciler hakkındaki resmi CSS3 sitesi: w3.org/TR/css3-selectors Ve bir uyumluluk

— GarfieldKlon

1216

İhtiyacınız olan şey özellik seçici. Html yapınızı kullanarak bir örnek şudur:

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

Yerine divsize bir öğe eklemek ya da tamamen kaldırmak ve yerine edebilirsiniz classsize belirtilen elemanın herhangi özelliğini ekleyebilirsiniz.

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

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

CSS özellik seçicileri hakkında daha fazla bilgiyi burada ve burada bulabilirsiniz . Ve MDN Dokümanlarından MDN Dokümanları

— Sotiris
kaynak

2

Güzel bilgi. Performans konusunda bir sorun varsa, çoğu CSS linteri yavaş performansın düzenli ifadesine (örneğin '*' kullanarak) benzeyen nitelik seçicilerini reddeder. Önişlemci (örn. Sass) kullanmak dışında, bunu yapmanın başka bir yolu var mı?

— CodeFinity

2

Class özelliğinin birden fazla alt dize içerip içermediğini kontrol etmenin bir yolu var mı? Belki bir şey div[class*="foo"][class="bar"]?

— Connor

"İçerir" örneğimizdeki bu alan oldukça katildir. Görebildiğim kadarıyla orada olmamalı, değil mi?

— Thomas

1

@Thomas Eşleşmeleri sağlamak için gerekli class="foo tocolor-red", ancak değilclass="foo fromtocolor-red-blue"

— aleclarson

Bunun için teşekkürler. Bu tekniği birkaç yıldır kullanıyorum, ancak ^ ^ sınıfının yalnızca HTML sınıfı girişinin başlangıcı için geçerli olduğunu hiç fark etmedim. HTML etiketi için tanımlanan tüm sınıf isimlerine uygulandığını düşündüm.

— BevansDesign

108

Evet bunu yapabilirsiniz.

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

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

Bunu yapmama nedenine gelince, bu yolu seçmenin nerede tercih edileceğini görüyorum; Tarza gelince, kendim yapmazdım, ama mümkün.

— thomas.han
kaynak

Bu IDtemel zeyilname için teşekkürler , sadece için değil class.

— Khom Nazid

26

Alternatif bir çözüm:

div[class|='tocolor'] "tocolor-1", "tocolor-2" vb. dahil "tocolor-" ile başlayan "class" özelliğinin değerleri ile eşleşecektir.

Bunun eşleşmeyeceğine dikkat edin

<div class="foo tocolor-">

Referans: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Att özniteliğine sahip bir öğeyi temsil eder; değeri ya tam olarak "val" ya da "val" ile başlayıp hemen "-" (U + 002D) ile başlar

— adroitec
kaynak

12

Bu işe yaramaz classbaşka sınıfla nitelik başlar bununla başlamıyor tocolor.

— BoltClock

1

Bu ayrıca Qt'nin widget stili sayfalarında da güzel çalışır. Örneğin, adlı tüm etiketlere bir stil uygulamak için şunu foo*yaparsınızQLabel[objectName|='foo'] { ... }

— Monica

@BoltClock'un dediği gibi, elemanın birden fazla sınıfı varsa ve OP'nin aradığı sınıfla başlamazlarsa bu çözüm kırılır.

— Dan Dascalescu

Chrome 78'de çalışmıyor, * ve ^ olsa da çalışıyor.

— Gordon Mohrin

3

Div'lerin daha fazla şekillendirilmesi için benzersiz tanımlayıcıya ihtiyacınız yoksa ve HTML5 kullanıyorsanız, özel Veri Öznitelikleri ile deneyebilirsiniz. Buradan okuyun veya Google'da aramayı deneyinHTML5 Custom Data Attributes

— DKSan
kaynak