CSS否定伪类:not()的正确认识

概述

CSS 否定伪类，:not(X)，是以一个简单的以选择器 X 为参数的功能性标记函数。它匹配不符合参数选择器 X 描述的元素。X 不能包含另外一个否定选择器。

:not 伪类的优先级即为它参数选择器的优先级。:not 伪类不像其它伪类，它不会增加选择器的优先级。

一、优先级

CSS :not 伪类常见错误认知之一就是搞不清楚其优先级。

如果对所有 CSS 伪类的优先级（也就是我们常说的选择器权重）进行分类，你会发现总共只有两个级别，0 级和 10 级。

0 级指没有优先级；
1 级是标签选择器；
10 级是类选择器，属性选择器；
100 级是 ID 选择器。

伪类，伪类，既然带有“类”字，自然其优先级好类选择器一致。

但是，其中有个特殊，那就是逻辑伪类的优先级都是 0。例如：:not()，:is()，:where()等。

逻辑伪类整个选择器语句的优先级是由括号里面内容决定的，不同的逻辑伪类规则不一样，其中:not()伪类的本身没有优先级，最终优先级是由括号里面的选择器决定的。

例如：

:not(.disabled) {}    /* 优先级等同于.disabled 选择器 */
:not(a) {}    /* 优先级等同于 a 选择器 */

不支持复杂选择器

:not()逻辑伪类出身很早，早到 IE9 浏览器都支持，不像现在的新出来的逻辑选择器，:not()伪类括号里面并不支持复杂的选择器（虽然新的规范已经让支持了，目前还没有浏览器跟进）。

例如，:not()伪类括号里面不能多个选择器：

:not(.disabled, .read-only) {}    /* 无效，不支持 */

正确写法为：

:not(.disabled), :not(.read-only) {}

例如，:not()伪类括号里面不支持选择器级联：

:not(a.disabled) {}    /* 无效，不支持 */

正确写法为：

:not(a):not(.disabled) {}

容易搞混的否定逻辑关系

这是本文的重点。

1. 连续否定的逻辑错误

例如，如果我们想要匹配既不包含.disabled 类名，又不包含.read-only 类名的<input>元素，我们的选择器该如何书写，很多人会使用下面的 CSS 代码：

input:not(.disabled),
input:not(.read-only) {}

乍一看好像没问题，实际上，上面的书写是大大的错误。

逗号分隔的选择器，表示的是“或”的关系，而不是“与”的关系。因此 input:not(.disabled), input:not(.read-only)表示的含义是：不包含.disabled 类名的<input>元素，或者不包含.read-only 类名的<input>元素。

最后导致的结果是.disabled 类名和.read-only 类名元素都会匹配。

例如：

因为<input class="disabled">虽然不会匹配 input:not(.disabled)，但是会匹配 input:not(.read-only)，导致出现了不希望出现的匹配效果。

这里，正确的书写方法应该是：

/* 正确的书写 */
input:not(.disabled):not(.read-only) {}

2. 全局否定的逻辑错误

例如我们希望除了

:not(article) p {
    margin: 0;
}

<article>
    <section>
        <p>margin 此时也是 0！<p>
    </section>
</article>

p {
    margin: 0;
}
article p {
    margin: 1em 0;
}

:not(article) > p {
    margin: 0;
}