测试两个类不存在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;
  }
}

我没有看到很多使用less和not（）的例子，在他们的文档中只有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

我能够通过嵌套两个＆amp;：not（）规则来实现，但我不确定这是最好的方法。

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