测试两个班没有用更少的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; 
    } 
    } 
}