如何让CSS选择以字符串开头的ID(不是在Javascript中)？

Question

如果HTML包含这样的元素:

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

如何匹配所有那些以"产品"开头的id？

我已经看到使用javascript完全做到这一点的答案,但如何只用CSS做到这一点？

Answer 1

[id^=product]

^=表示"以...开头".相反,$=表示"结束".

这些符号实际上是从Regex语法中借用的,其中^和分别$表示"字符串的开头"和"字符串的结尾".

有关完整信息,请参阅规格.

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

使用属性选择器

[id^=product]{property:value}