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

Posted 2023-03-06

【中文标题】如何让 CSS 选择以字符串开头的 ID（不是在 Javascript 中）？

【英文标题】：How to get CSS to select ID that begins with a string (not in Javascript)?

【发布时间】：2012-07-14 20:21:37

【问题描述】：

如果 html 有这样的元素：

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

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

我已经看到完全使用 javascript 执行此操作的答案，但如何仅使用 CSS 执行此操作？

【参考方案1】：

我也想分享这个解决方案，也许将来它可以帮助某人。 正如其他人所说，您可以为id写[id^=product]

但我们也可以举一个class 的例子： [class^="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;

祝你好运……

【参考方案2】：

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

[id|="name_id"]

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

【讨论】：

您是如何注意到的？参考？

这里的文档：w3.org/TR/selectors-3/#attribute-selectors 这应该选择所有以“name_id”开头或等于“name_id”的id

att|=val 与 att^=val 不同。从提到的参考资料中：|= 选择器“表示具有 att 属性的元素，其值要么正好是“val”，要么以“val”开头紧跟“-”。”所以一个|= 不会匹配像“product42”这样的 id，但会匹配“product-42”。

【参考方案3】：

[id^=product]

^= 表示“以”开头。反之，$= 表示“以”结尾。

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

有关完整信息，请参阅the specs。

【讨论】：

感谢您的方法和解释，我已经编辑了我的问题，使其更加清晰。出于好奇，有没有办法匹配 id 字符串中的字符串？

见the specs，他们比我解释得更好！

@itamar：感谢您尝试编辑我的答案，但仅当值包含不是有效标识符的字符时才需要引用。 product 显然是一个有效的标识符，因此不需要引号。

这类选择器的特异性很低

@Emerald214 :not([id^=product])

【参考方案4】：

我会这样做：

[id^="product"] 
  ...

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

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

现在选择器变成了：

.product 
  ...

【讨论】：

@Blender，谢谢，我选择了另一个答案，因为它向我解释了更多并理解所使用的符号。我不能在这种情况下使用类，否则会更好。

【参考方案5】：

使用attribute selector

[id^=product]property:value