里面有多个类：not（）

Question

我试图使用:not()属性从规则中排除一对类，例如：

*:not(.class1, class2) { display: none; }

但是，not()属性似乎不支持逗号分隔的类，如this fiddle中所示。

HTML：

<div class='one'>
  foo
</div>
<div class='two'>
  foo
</div>
<div class='three'>
  foo
</div>
<div class='four'>
  foo
</div>

CSS：

div {
  background-color: #CBA;
}

div:not(.one) {
  background-color: #ABC;
}

div:not(.one, .three) {
  color: #F00;
}

第一条和第二条规则适用，但第三条规则不适用。

我无法*:not(.class1), *:not(.class2)，因为任何class2的元素都会被*:not(.class1)选中，反之亦然。

我不想做

* { display: none;}
.class1, .class2 { display: inline; }

因为并非所有.class1和.class2元素都具有相同的原始显示属性，我希望它们保留它。

如何使用not()属性或其他方式从规则中排除多个类？

Answer 1

您可以使用：

div:not(.one):not(.three) {
    color: #F00;
}

Fiddle