CSS :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) {}

这是本文的重点。

例如，如果我们想要匹配既不包含.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 class="read-only">

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

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

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

例如我们希望除了<article>标签下的<p>元素的margin值都是0，我们代码该怎么写。

很多人会这样书写：

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

看上去没有问题，实际上问题非常严重，:not(article) p实际语义是，如果<p>元素的祖先元素的标签名不是article，则margin值是0。

其中就包括这样的场景：

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

此时，虽然<p>元素在<article>元素内，但是，由于同时也在<section>元素内，于是匹配了:not(article) p这个选择器，导致出现意料之外的样式表现。

正确的书写应该是：

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

咦？不能使用:not伪类实现吗？对的，在这种场景下，:not伪类是无解的。

除非强制层级元素，也就是<p>元素是<article>的相邻子元素元素，此时我们可以使用下面CSS满足我们需求，不过限制很大，建议还是使用传统重置策略：

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

:not伪类是目前唯一一个可以大规模放心使用的逻辑伪类，非常有用，优点也很突出，大家可以多用用。

但是，其中也不乏一些会让人踩坑的地方，本文就介绍这几个大家可能会理解错误或使用错误的地方，至于其优点在那里，限于不是本文重点，以后有机会在详细介绍，总之，好用，大家要多用用。

好了，就说这么多。

小朋友又生病了，连续去了3天医院了，待会儿还要去医院挂水，不扯了，感谢阅读，欢迎分享。

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。
本文地址：www.zhangxinxu.com/wordpress/?…

（本篇完）// 文章不错，我要分享到微信！有话要说？点击这里。