里面有多个类:not()

Question

我正在尝试使用该:not()属性从规则中排除一对类,例如:

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

但是,看起来该not()属性不支持逗号分隔的类,如此小提琴中所示.

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;
}

小提琴