内部有多个类: not()

我尝试使用 :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()属性或其他方式从规则中排除多个类?

59947 次浏览

You can use:

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

Fiddle