CSS, bir dizeyle başlayan kimliği seçmek için nasıl kullanılır (Javascript'te değil)? HTML şöyle öğesi vardır

Question

edin:

id="product42" 
id="product43" 
... 

nasıl "ürünü" ile başlayan bu kimliği yılların tüm maç mı?

Tam olarak javascript kullanarak bunu yapan yanıtlar gördüm, ancak bunu yalnızca CSS ile nasıl yapabilirim?

Answer 1

[id^=product] 

^= gösterir kullan "ile başlar" Bu sınıflar içindir budur. Tersine, $= "uçlarla" işaret eder. Semboller, Regex sözdiziminden, ^ ve $ sırasıyla "dizenin başlangıcı" ve "dizenin sonu" anlamına gelen sembollerden ödünç alınmıştır.

Tam bilgi için the specs adresine bakın.

Answer 2

böyle yapardım:

[id^="product"] { 
    ... 
} 

İdeal olarak, bir sınıfını kullanın.

<div id="product176" class="product"></div> 
<div id="product177" class="product"></div> 
<div id="product178" class="product"></div> 

Ve şimdi seçici olur:

.product { 
    ... 
} 

Answer 3

attribute selector

[id^=product]{property:value} 

Answer 4

Aynı şeyi yapan başka bir CSS seçicisinin olduğunu fark ettim. şöyle sözdizimi:

[id|="name_id"] 

Bu çift tırnak içine kelimesiyle başlayan tüm unsurları kimliği seçecektir.