Html 如何让CSS选择以字符串开头的ID（不是Javascript）？

如果HTML包含如下元素：

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

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

如何匹配所有以“产品”开头的id

我已经看到了一些答案，这些答案完全是使用javascript实现的，但是如何仅使用CSS实现呢？

我会这样做：

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

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

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

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

使用

^=

表示“以开始”。相反，

$=

表示“以结束”

这些符号实际上是从正则表达式语法中借用的，其中

^

和

$

分别表示“字符串的开始”和“字符串的结束”

---

有关完整信息，请参阅。

我注意到还有另一个CSS选择器也做同样的事情。 语法如下：

[id|="name_id"]

---

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

我也想与大家分享这个解决方案，也许将来它可以帮助别人。
正如其他人所说，您可以为

id

但我们也可以为

类

提供一个示例：

[class^=“product-”]

表示类以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字符串中的字符串？看，他们比我解释得更好@itamar：非常感谢您尝试编辑我的答案，但只有当值包含无效标识符的字符时才需要引号<代码>产品显然是一个有效的标识符，因此不需要引号。这种选择器的特殊性非常强low@Emerald214

：不是（[id^=product]）

@Blender，谢谢，我选择了另一个答案，因为它向我解释了更多，并且理解了使用的符号。我不能在这个场景中使用类，否则，是的，这会更好。您是如何注意到的？参考？此处的文档：应选择所有开始或等于“name_id”

att|=val

与

att^=val

不同的id。从前面提到的引用来看：

|=

选择器“表示一个具有att属性的元素，其值要么正好是“val”，要么以“val”开头，后跟“-.”，因此像“product42”这样的id不会与

|=

匹配，而“product-42”会匹配。

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