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控制台..

如何在此处指定确切的类名，以便仅获取该特定类？

谢谢

Answer 1

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

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

或

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

或

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

Answer 2

元素中的类定义用空格分隔，因此你的第一个元素infact有两个类'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'类的元素，然后删除任何属于'div'元素的元素，这些元素具有分配给它们的'234'或'haha'类中的任何一个

Answer 3

属性选择器语法

对于直接CSS，它是：

[class='My class1']

对于大多数javascript框架，如jQuery，MooTools等，它将使用与直接CSS相同的选择器字符串。

关键是使用属性选择器来做，而不是直接按类名本身选择。 class=（仅使用等号）将仅选择以下字符串的完全匹配。如果您还需要抓取class1 My，那么您还需要选择[class='class1 My']。这将涵盖仅应用这两个类的两种情况（无论html中的顺序如何）。

用于确切类名的Css选择器

3 个答案:

属性选择器语法