如何選擇僅包含「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>