如果HTML有这样的元素:
id="product42"
id="product43"
...
如何匹配所有以“product”开头的id ?
我已经看到的答案,这完全使用javascript,但如何做到只有CSS?
如果HTML有这样的元素:
id="product42"
id="product43"
...
如何匹配所有以“product”开头的id ?
我已经看到的答案,这完全使用javascript,但如何做到只有CSS?
当前回答
[id^=product]
^=表示“从”开始。相反,$=表示“以”结尾。
这些符号实际上借鉴了Regex语法,其中^和$分别表示“字符串的开始”和“字符串的结束”。
详细信息请参见说明书。
其他回答
[id^=product]
^=表示“从”开始。相反,$=表示“以”结尾。
这些符号实际上借鉴了Regex语法,其中^和$分别表示“字符串的开始”和“字符串的结束”。
详细信息请参见说明书。
我也想分享这个解决方案,也许将来它能帮助到别人。 正如其他人所说,您可以为id编写[id^=product]
但是我们也可以给这个类一个例子: [class^="product-"]表示以product开头的类 还有* like this [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;
}
祝你好运……
使用属性选择器
[id^=product]{property:value}
我注意到有另一个CSS选择器做同样的事情。 语法如下:
[id|="name_id"]
这将选择所有以双引号括起来的单词开头的元素ID。
我会这样做:
[id^="product"] {
...
}
理想情况下,使用类。这就是课程的目的:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
现在选择器变成:
.product {
...
}