Question

在网站上工作时，我遇到了需要选择具有动态ID号的div类的情况。例如，每个新的div类都会在其类名中从我的数据库中携带它的“id”，如下所示：

<div class="reply_to_08"></div>

所以我可以这样做

.reply_to_08 {}

但我不想为每个div编写一个新的css选择器。我想选择其中包含“.reply_to_”的所有内容，同时忽略作为动态数字的“08”。

所以我在一个网站上的博客文章中找到了一个解决方案：

div[class^=reply_to_]

它确实有效，但没有解释为什么它会起作用或如何起作用。而我似乎无法理解它。

有人可以解释一下为什么有效吗？是推荐这种方法，还是有另一种方法可以达到我的目的？

Answer 1

关键是 Attribute Selector （^=）的[class^=reply_to_]模式。

在您的情况下，^=会让您选择class属性值以"reply_to_"开头的每个元素

Answer 2

^ =代表开头。在您的情况下，这意味着您选择每个具有以“reply_to _”开头的类的div。

这就是整个技巧。

Answer 3

E[foo^="bar"] - 一个E元素，其foo属性值恰好以字符串bar开头。

- W3C Selectors Level 3规范。

注意： IE 7 +，Firefox 3.5 +，Safari 3.2 +，Opera 9.5+（请参阅http://caniuse.com/#feat=css-sel3）

Answer 4

这是CSS3规范的第6.3.2节：

6.3.2。子串匹配属性选择器提供了三个额外的属性选择器，用于匹配属性值中的子字符串：

[ATT ^ = VAL] 表示具有att属性的元素，该属性的值以前缀“val”开头。如果“val”是空字符串，则选择器不代表任何内容。 [ATT $ = VAL] 表示具有att属性的元素，其值以后缀“val”结尾。如果“val”是空字符串，则选择器不代表任何内容。 [ATT * = VAL] 表示具有att属性的元素，该属性的值至少包含子字符串“val”的一个实例。如果“val”是空字符串，则选择器不代表任何内容。

Answer 5

这是CSS3的新选择。这是关于CSS3 selectors的帖子，其中有一个关于您所指的那个的简短部分。

它所说的基本上是“以...开头”，所以在你的情况下，选择器div[class^=reply_to_]说给我所有div-elements，它们的类名以“reply_to”开头。

请注意，选择器是特定于CSS3的，因此对旧版浏览器的选择器支持将受到限制。

更新显然IE7及更高版本支持“启动时”选择器，所以支持看起来相当不错，如果你不支持IE6支持（在这种情况下，抱歉）。这是浏览器支持选择器的full list。

选择具有动态类名的div

5 个答案: