里面有多个类：not（） [英] Multiple classes inside :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：

 code> div {
 background-color：#CBA; 
} 
 
 div：not（.one）{
 background-color：#ABC; 
} 
 
 div：not（.one，.three）{
 color：＃F00; 
} 
  

应用第一和第二个规则，但第三个不应用。 / p>

我不能做 *：not（.class1），*：not（.class2）其中 class2 将被 *：not（.class1）选择，反之亦然。

我不想做

  * {display：none;} 
 .class1，.class2 {display：inline; } 
  

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

或者使用 not（）属性或者其他方式？

解决方案

您可以使用：

  div：not（.one）：not（.three）{
 color ：＃F00; 
} 
  

小提琴

I'm trying to use the :not() property to exclude a pair of classes from a rule, e.g.:

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

However, it looks like the not() property doesn't support comma separated classes, as show in 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;
}

The first and second rules get applied, but the third doesn't.

I can't do *:not(.class1), *:not(.class2) because any element which has class2 will be selected by *:not(.class1) and vice versa.

I don't want to do

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

because not all .class1 and .class2 elements have the same original display property, and I want them to retain it.

How can I exclude multiple classes from a rule, either with the not() property or otherwise?

解决方案

You can use:

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

Fiddle

这篇关于里面有多个类：not（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！