如何让CSSselect以string开头的ID（不是用Javascript）？

如果HTML有这样的元素：

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

我如何匹配所有这些ID的“产品”开始？

我已经看到了完全使用JavaScript做到这一点的答案，但如何做到这一点只有CSS？

Answer 1

 [id^=product] 

^=表示“开始于”。 相反， $=表示“结束于”。

符号实际上是从正则expression式语法中借用的，其中^和$表示“string开始”和“string结束”。

请参阅规格了解完整信息。

Answer 2

我会这样做：

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

理想情况下，使用一个类。 这是什么类为：

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

现在select器变成：

 .product { ... } 

Answer 3

使用属性select器

 [id^=product]{property:value} 

Answer 4

我注意到有另一个CSSselect器，做同样的事情。 语法如下：

 [id|="name_id"] 

这将select以双引号括起来的单词开始的所有元素ID。