測試兩個班沒有用更少的CSS存在

Question

我有一個元素可以說，它可能有包含.foo或的.bar或兩項或不作爲類：

<div class="foo bar">green</div> 
<div class="foo">green</div> 
<div class="bar">green</div> 
<div class="something-else">red</div> 

如何測試該元素沒有按沒有任何一堂課。

我想這樣的事情，但預期它不工作：

div { 
    background: green; 
    &:not(.foo) and &:not(.bar) { 
    background: red; 
    } 
} 

我沒有看到很多例子使用較少，而不是（），只能在自己的文檔1。

Answer 1

要說不在CSS選擇多個條件，你需要把它們連在一起：div:not(.foo):not(.bar)

div { 
    background: green; 
    &:not(.foo):not(.bar) { 
    background: red; 
    } 
} 

Answer 2

總是有純CSS的替代品。

div { background: red; } 
div.foo, div.bar { background: green; } 

Answer 3

我能夠通過嵌套2 &做到這一點：沒有（）規則，但我不確定這是最好的方法。

div { 
    background: green; 
    &:not(.foo) { 
    &:not(.bar) { 
     background: red; 
    } 
    } 
}