如何讓CSS選擇以字符串開頭的ID（不使用Javascript）？

Question

如果HTML有這樣的內容：

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

如何匹配所有開頭「產品」的ID的呢？

我已經看到了完全使用javascript來做這個的答案，但是如何用CSS來做到這一點？

Answer 1

[id^=product] 

^=表示 「開頭」。相反，$=表示「結束於」。

這些符號實際上是從正則表達式語法中借用的，其中^和$分別表示「字符串的開始」和「字符串的結束」。

有關完整信息，請參閱the specs。

Answer 2

我會做這樣的：

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

理想的情況下，使用類。這是什麼類是：

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

而現在的選擇就變成了：

.product { 
    ... 
} 

Answer 3

使用attribute selector

[id^=product]{property:value} 

Answer 4

我注意到有另一個CSS選擇器可以做同樣的事情。 的語法如下：

[id|="name_id"] 

這將選擇與包括在雙引號字開始的所有元素ID。