Question

例如，为了设置标准输入的样式，我写了类似的内容：

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

然而，这会增加特异性，所以如果我想使用类来覆盖它，我必须做类似的事情：

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

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

Answer 1

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

这是Selectors 4解决的另一个问题，它增强了:not()：特异性。在选择器4中，您将能够用一个:not()伪替换所有这些否定，从而有效地将原始选择器内的特异性降低到只有一个属性选择器。来自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

这可能会让您解决特异性问题：

NPM_ACTUAL=$(versionToInt $(npm --version))  # Capture npm version
NPM_REQUIRED=$(versionToInt 4.3.0)           # Desired version
if [ $NPM_ACTUAL \< $NPM_REQUIRED ]; then
  echo "Please update to npm@latest"
  exit 1
fi

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

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

2 个答案: