css - 使用较少的 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

我可以通过嵌套两个 &:not() 规则来做到这一点，但我不确定这是最好的方法。

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