如何选择仅包含“foobar”类的元素，请不要选择它是否包含任何其他类？

Question

我只想选择元素，如果它有一个类，该类是'foobar'。

<style> 
.foobar { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 
</style> 

<div class="foobar">i should be selected</div> 

<div class="foobar ipsum">i should not be selected</div> 

我知道我可以添加一个风格.foobar.ipsum选择它{做一件事}和{.foobar别的东西}，但我没有在其他类的控制。基本上，当元素只有foobar类时，我知道它是我的元素，来自其他地方。这是CSS库世界碰撞时发生的情况。我知道这里有更深层次的问题需要解决，但现在我正在困扰着我。

Answer 1

纯CSS最简单的方法是使用属性选择：

[class="foobar"] { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 

您可能没有在其他元素的控制，但如果你可以控制你的，你可以修改它的class属性，mayabelle makes a good point关于为你的元素分配自己的特殊类，然后选择这个类。这样，你明确地说明哪个元素是你的，而不是假设没有额外的类意味着它是你的。

Answer 2

你需要使用一个attribute selector：

[class="foobar"] { 
    background: black; 
} 

http://jsfiddle.net/dA2dp/

Answer 3

如果它是 “你的元素”，你可以把附加类呢？那么你可以选择使用：

<style> 
.foobar.yourClass { 
    /* your css */ 
} 
</style> 

<div class="foobar yourClass">i should be selected</div> 
<div class="foobar ipsum">i should not be selected</div>