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

192

如果HTML具有这样的元素：

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

如何匹配所有以“ product”开头的ID？

我已经看到了完全使用javascript做到这一点的答案，但是如何仅使用CSS来做到这一点？

html css css-selectors

— 古普特龙
source

360

[id^=product]

^=表示“开始于”。相反，$=表示“结尾为”。

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

有关完整信息，请参见规格。

— Niet the Dark Absol
source

1

感谢您的方法和解释，我已经对问题进行了编辑，以便更加清楚。出于好奇，有没有办法在ID的字符串内匹配字符串？

— guptron

查看规格，他们比我更好地解释了！

— Niet the Dark Absol

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

— Niet the Dark Absol 2013年

这种选择器的特异性很低

— nuander

3

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

— Niet the Dark Absol

59

我会这样：

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

理想情况下，使用一个类。这是什么类：

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

现在选择器变为：

.product {
  ...
}

— 搅拌机
source

1

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

— guptron

5

[id^=product]{property:value}

— 穆萨
source

-1

我注意到，还有另一个CSS选择器也可以执行相同的操作。语法如下：

[id|="name_id"]

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

— 路易吉·斯佩西亚（Luigi Spezia）
source

您是怎么注意到的？参考？

— Ben Bozorg

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

— Dessauges Antoine

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

— Goozak