CSS :not伪类可能错误的认识

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8808

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、特别的你，特别的0优先级

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 类名的 元素，我们的选择器该如何书写，很多人会使用下面的CSS代码：

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

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

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

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

例如：

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

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

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

2. 全局否定的逻辑错误

例如我们希望除了

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

    

        
margin此时也是0！

    

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

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