如何覆盖具有许多否定（：不）的选择器？

Question

例如以风格标准输入我写的东西，如：

input:not([type="checkbox"]):not([type="radio"]) { 
    background-color: blue; 
} 

不过，所以如果我想用一个类我必须这样做来覆盖它增加特异性很多：

.red.red.red { 
    background-color: red; 
} 

有没有办法在不改变功能的情况下降低原始输入选择器的特异性？

Answer 1

不幸的是，在选择器3，这是因为:not()你能做的最好的只接受一个简单的选择。话虽如此，重写规则中的选择器可以替换为input.red.red - 除了该规则必须在样式表中早些出现之外，您不需要比属性选择器更多的类选择器。

这是选择器4通过其增强:not()解决的另一个问题：特异性。在选择器4中，您将能够用一个:not()伪代替所有这些否定，从而将原始选择器内的特异性有效地降至仅一个属性选择器。 From section 16：

a：not（）伪类的特异性被其选择器列表参数中最具体的复杂选择器的特异性替换。

由于任何属性选择器与类选择器同样具体，因此列表中任意数量的单独属性选择器的特性永远不会超过其中的一个。这使您可以避免仅使用一个类选择器进行覆盖，而无需重复执行。

以下works in Safari作为证明的概念：

/* 1 type, 2 attributes -> specificity = (0, 2, 1) 
 
input:not([type="checkbox"]):not([type="radio"]), 
 
    1 type, 1 attribute -> specificity = (0, 1, 1) */ 
 
input:not([type="checkbox"], [type="radio"]) { 
 
    background-color: blue; 
 
} 
 

 
/* 1 type, 1 class  -> specificity = (0, 1, 1) */ 
 
input.red { 
 
    background-color: red; 
 
}

<input type="checkbox"> 
 
<input type="radio"> 
 
<input type="text"> 
 
<input class="red" type="text">

Answer 2

这可能让你周围的特殊性问题：

input:not([type="checkbox"]):not([type="radio"]):not(.red)) { 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
}

<input type="checkbox"><br> 
 
<input type="radio"><br> 
 
<input class="red">