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时，似乎不可能。但是，如果我读错了它，或者存在一些未记录的方式来做到这一点，我会要求您提供。

Answer 1

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

div.class1.class2 { background: red; }
div.class1, div.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>

Answer 2

您可以将:not()选择器与类结合使用，如下面的小提琴中所示。然后，它将针对没有class2的任何类。

div.class1.class2 { background: red; }
div.class1:not(.class2){background: grey; }
div.class2:not(.class1){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>

Answer 3

您可以在CSS中组合许多:not选择器

div.class1.class2 {
  background: red;
}

div:not(.class1):not(.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>

JSFiddle link

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

3 个答案: