如何 CSS :not(.class1.class2)？ [复制]答案

【问题标题】：How to CSS :not(.class1.class2)? [duplicate]如何 CSS :not(.class1.class2)？ [复制]
【发布时间】：2019-10-09 08:29:52
【问题描述】：

我只想将样式应用于不具有 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的语法时，似乎是不可能的。但是，如果我误读了它，或者存在一些未记录的方法来做到这一点，我请你帮忙。

【问题讨论】：

你没有说.class3 会收到什么颜色。它应该也是灰色的，因为它不是两个类 class1 和 class2，还是因为它是 不是两个类 class1 和 class2，所以它不会收到任何颜色？
问题是“如何在一次性声明中实现”。当然我可以声明 div.class1, div.class2 { ... }，但这并不好玩。如果我添加更多类会怎样。
请清楚您的真正目的，以便我们提供好的答案
哎呀，我忘了说我写的应该把 .class3 设置为灰色，逻辑上！
我建议在这里向我们展示您的真实案例。光看问题，去掉:not(.class1.class2)就能解决问题

标签： css selector

【解决方案1】：

您可以将: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>

【讨论】：

这里的问题是要获得一种简单的方法来声明“我不想要两个 .class1.class2”。你把它弄得非常非常复杂 xD。
@Baptiste 这就是它的完成方式。这并不是“真的很复杂”。
您的答案有效，但是-1- @Swaroop Deval 使它更简单，-2- 问题是仅在一行中声明 .class1 和 .class2 的样式。
div.class1:not(.class2), div.class2:not(.class1){background: grey; }
他为一个类定义了 CSS（好的，两个，但是你可以为一个规则有任意数量的选择器）这是基本的 CSS，非常棒。这完全取决于您想要实现的目标。如果您想使用没有 class2 的 class1 来设置元素的样式，那么我的解决方案会更准确。真的取决于你的用例。

【解决方案2】：

您可以为具有这两个类之一的元素赋予灰色背景，为同时具有这两个类的元素赋予红色背景。

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>

【讨论】：

是的，我可以。我以一种经验的方式问它，请猜猜我想做更复杂的事情，而不仅仅是对两个 div 应用颜色。我简化了我的真实案例以使我的问题易于理解。

【解决方案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

【讨论】：