首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >用于精确类名的Css选择器

用于精确类名的Css选择器
EN

Stack Overflow用户
提问于 2013-06-26 15:30:07
回答 3查看 13.8K关注 0票数 7

我正在尝试对确切的类名进行css选择器查询。

考虑一下这个html

代码语言:javascript
代码运行次数:0
运行
复制
<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>

现在我只想捕获'My class1‘类,忽略'My class1 234’或'My class1 haha‘。

查询$$('div.My class1')给出了上面所有的4。注意:我正在尝试firebug控制台..

如何在这里指定确切的类名,以便只获取特定的类?

谢谢

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-06-26 15:35:51

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

代码语言:javascript
代码运行次数:0
运行
复制
jQuery("[class='My class1']").

代码语言:javascript
代码运行次数:0
运行
复制
$("[class='My class1']").

代码语言:javascript
代码运行次数:0
运行
复制
$$("[class='My class1']").
票数 12
EN

Stack Overflow用户

发布于 2013-06-26 15:36:48

元素中的类定义用空格分隔,因此你的第一个元素实际上有两个类'My‘和'class1’。

如果你使用的是Mootools,你可以使用以下工具:

代码语言:javascript
代码运行次数:0
运行
复制
$$("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,则可以使用以下命令:

代码语言:javascript
代码运行次数:0
运行
复制
$("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‘元素。

票数 5
EN

Stack Overflow用户

发布于 2013-06-26 23:23:49

属性选择器语法

对于直接的CSS,它是:

代码语言:javascript
代码运行次数:0
运行
复制
[class='My class1']

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

关键是使用属性选择器,而不是直接通过类名本身进行选择。class= (只有等号)将只选择与后面的字符串完全匹配的字符串。如果您还需要捕获class1 My,那么您也需要选择[class='class1 My']。这将涵盖仅应用这两个类的两种情况(与html中的顺序无关)。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17314060

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档