CSS：定位到没有任何类列表的元素

Question

我想为某些元素创建规则，该规则仅在元素具有none类列表的情况下才影响该元素。

我的尝试：

div:not(.a, .c) {
  color: red;
}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

如果运行此代码段，则显然无法正常工作。似乎选择器无效，并且不会影响任何div。

接下来，我尝试链接:not()，这似乎很笨拙，但有效：

div:not(.a):not(.c) {
  color: red;
}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

这是解决给定问题的唯一方法吗？

Answer 1

我想通过您的问题，您总是知道您不想更改其样式的类。因此，假设这是我的看法。

.all {
  /** give default styles to all elements */
  color: red;
}

.a,
.c {
  /** then reset the ones you where targeting with :not():not()... */
  color: black;
}

<div class="all a">a</div>
<div class="all b">b</div>
<div class="all c">c</div>

Answer 2

在CSS中束缚:not()选择器是当前（2020年1月）指示逻辑AND运算符的唯一方法。

所以，是：

div:not(.a):not(.c)

是正确的书写方式：

div:not(.a) AND div:not(.c)

div:not(.a):not(.c) {
  color: red;
}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>