如何使用CSS：not（.class1.class2）？

Question

我只想对没有两个类class1和class2的元素应用样式]

在此示例中，我希望“同时具有”为红色（这有效），“具有一个”和“具有另一个”为灰色（这不可行）。以下示例无法完成任务。有办法做到这一点并拯救我的一天吗？

div.class1.class2 { background: red; }
div:not(.class1.class2) { background: grey; }
<div class="class1">has one</div>
<div class="class2">has another</div>
<div class="class1 class2">has both</div>
<div class="class3">has anything else</div>

当我研究语法https://developer.mozilla.org/en-US/docs/Web/CSS/:not时，似乎不可能。但是，如果我读错了它，或者存在一些未记录的方式来做到这一点，我请您提供它。

我只想为没有类class1和class2的元素应用样式这不是）。 ...

Answer 1

您可以为具有这两个类之一的元素提供灰色背景，为具有这两个类的元素提供红色背景。

Answer 2

您可以将:not()选择器与一个类结合使用，就像下面的小提琴一样。然后，它将针对没有class2的任何类。

Answer 3

像这样使用The :not() CSS pseudo-class