javascript 用于精确类名的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17314060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css selector for exact class name
提问by Arindam Roychowdhury
I am trying to make a css selector query for exact class name .
我正在尝试对确切的类名进行 css 选择器查询。
Consider this html
考虑这个 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>
Now i want to catch only class 'My class1' ...and ignore the 'My class1 234' or 'My class1 haha'..
现在我只想捕捉“My class1”类......而忽略“My class1 234”或“My class1 haha”..
The query $$('div.My class1') , gives me all the 4 above . Note : I am trying on firebug console..
查询 $$('div.My class1') ，给了我上面的所有 4 。注意：我正在尝试萤火虫控制台..
How to specify the exact class name here so to get only that particular class ?
如何在此处指定确切的类名以便仅获取该特定类？
Thanks
谢谢
回答by Daniel W.
jQuery equals selector: http://api.jquery.com/attribute-equals-selector/
jQuery 等于选择器：http: //api.jquery.com/attribute-equals-selector/
jQuery("[class='My class1']").
or
或者
$("[class='My class1']").
or
或者
$$("[class='My class1']").
回答by Seidr
Class definitions in elements are separated by spaces, as such your first element infact has both classes 'My' and 'class1'.
元素中的类定义由空格分隔，因此您的第一个元素实际上同时具有类“My”和“class1”。
If you're using Mootools, you can use the following:
如果您使用的是 Mootools，则可以使用以下内容：
$$("div.My.class1:not(div.234):not(div.haha)")
Example in Mootools: http://jsfiddle.net/vVZt8/2/
Mootools 中的示例：http: //jsfiddle.net/vVZt8/2/
Reference: http://mootools.net/docs/core125/core/Utilities/Selectors#Selector:not
参考：http: //mootools.net/docs/core125/core/Utilities/Selectors#Selector: not
If you're using jQuery, you can use the following:
如果您使用的是 jQuery，则可以使用以下内容：
$("div.My.class1").not("div.234").not("div.haha");
Example in jQuery: http://jsfiddle.net/vVZt8/3/
jQuery 中的示例：http: //jsfiddle.net/vVZt8/3/
Reference: http://api.jquery.com/not-selector/
参考：http: //api.jquery.com/not-selector/
These two examples basically retrieve all elements with the classes 'My' and 'class1', and then remove any elements that are a 'div' element which have the either of the '234' or 'haha' classes assigned to them.
这两个示例基本上检索具有“My”和“class1”类的所有元素，然后删除属于“div”元素且分配了“234”或“haha”类的任何元素。
回答by ScottS
Attribute Selector Syntax
属性选择器语法
For straight CSS it is:
对于直接的 CSS，它是：
[class='My class1']
For most javascript frameworks like jQuery, MooTools, etc., it is going to be the same selector string used as for the straight CSS.
对于 jQuery、MooTools 等大多数 javascript 框架，它将与用于直接 CSS 的选择器字符串相同。
The key point is to use an attribute selector to do it, rather than selecting directly by the class name itself. The class=(with just the equals sign) will onlyselect for an exact match of the string following. If you also have need of catching class1 Mythen you would need to select as well for [class='class1 My']. That would cover the two cases where only those two classes are applied (no matter the order in the html).
关键是使用属性选择器来做，而不是直接通过类名本身来选择。的class=（只有等号）将只选择字符串的下列完全匹配。如果您还需要捕捉，class1 My那么您还需要选择[class='class1 My']. 这将涵盖仅应用这两个类的两种情况（无论 html 中的顺序如何）。
