精确匹配类名的 CSS 选择器

Question

我将尝试创建一个精确匹配类名的CSS选择器查询。

考虑以下HTML代码：

<div class="My class1">Some long text</div>
<div class="My class1 234">Some long text2</div>
<div class="My class1">Some long text3</div>
<div class="My class1 haha">Some long text2</div>

现在，我想只捕获类“我的类1”...并忽略“我的类1 234”或“我的类1哈哈”...

查询$$('div.My class1')，会给我以上所有4个。 注意：我正在尝试使用Firebug控制台。

如何在这里指定确切的类名，以便只获取那个特定的类？

谢谢

- Arindam Roychowdhury

---

这两个答案有符合您的需求吗？如果没有，为什么呢？反馈很重要。 - Seidr

Answer 1

jQuery等于选择器：http://api.jquery.com/attribute-equals-selector/

jQuery("[class='My class1']").

或者

$("[class='My class1']").

或者

$$("[class='My class1']").

- Daniel W.

---

为什么你假设 OP 在使用 jQuery？特别是考虑到最后一行不是 jQuery。 - BoltClock

说实话，我不知道$$代表哪个框架/类。jQuery是最常见的，而且在mootools中也是一样的，可以参考http://mootools.net/docs/core125/core/Utilities/Selectors - Daniel W.

Answer 2

属性选择器语法

CSS 中的属性选择器语法如下：

[class='My class1']

大多数javascript框架（如jQuery、MooTools等）使用的选择器字符串与直接使用CSS时相同。关键是要使用属性选择器来完成，而不是直接通过类名进行选择。仅使用class=（只有等号）将仅选择匹配后面字符串的确切项。如果您还需要捕获class1 My，则还需要选择[class='class1 My']。这将覆盖仅应用这两个类的情况（无论在html中的顺序如何）。

- ScottS

Answer 3

元素中的类定义由空格分隔，因此您的第一个元素实际上具有“My”和“class1”两个类。

如果您正在使用Mootools，则可以使用以下内容：

$$("div.My.class1:not(div.234):not(div.haha)")

在Mootools中的示例：http://jsfiddle.net/vVZt8/2/

参考资料：http://mootools.net/docs/core125/core/Utilities/Selectors#Selector:not

如果您使用jQuery，可以使用以下方法：

$("div.My.class1").not("div.234").not("div.haha");

在jQuery中的示例：http://jsfiddle.net/vVZt8/3/

参考：http://api.jquery.com/not-selector/

这两个示例基本上检索具有'My'和'class1'类的所有元素，然后删除任何具有'234'或'haha'类分配给它们的'div'元素。

- Seidr