如何让CSS选择以字符串开始的ID(不是在Javascript)?

如果HTML有这样的元素:

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

如何匹配所有以“product”开头的id ?

我已经看到的答案，这完全使用javascript，但如何做到只有CSS?

197530 次浏览
小开

我会这样做:

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

理想情况下，使用类。这就是课程的目的:

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

现在选择器变成:

.product {
...
}
小开

使用属性选择器

[id^=product]{property:value}
小开
最佳答案 
[id^=product]

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

这些符号实际上是从Regex语法中借来的，其中^和$分别表示“字符串的开始”和“字符串的结束”。

详细信息见规格。

小开
我注意到有另一个CSS选择器做同样的事情。 语法如下:

[id|="name_id"]

这将选择所有以双引号括起来的单词开头的元素ID。

小开
我也想分享这个解决方案，也许在未来它可以帮助别人。 正如其他人所说，你可以为id

编写[id^=product] 但是我们也可以为class提供一个例子: [class^="product-"]表示以product开头的类 和*，像这样[class*="product-"]

这是一个简单的例子:

/* Icons */
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'mk-font' !important;
font-size: 3em;
}

祝你好运……


提交答案