web前端开发个人技术博客
当前位置: HTML/CSS > CSS否定伪类:not()的正确认识

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

2019-08-02 分类:HTML/CSS 作者:码云 阅读(242)

概述

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

:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级。
CSS否定伪类:not()的正确认识

一、优先级

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

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

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

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

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

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

例如:

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

不支持复杂选择器

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

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

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

正确写法为:

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

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

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

正确写法为:

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

容易搞混的否定逻辑关系

这是本文的重点。

1. 连续否定的逻辑错误

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

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

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

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

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

例如:

1
2
3
<!-- 均会匹配 -->
<input class="disabled">
<input class="read-only">

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

这里,正确的书写方法应该是:

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

2. 全局否定的逻辑错误

例如我们希望除了

标签下的

元素的margin值都是0,我们代码该怎么写。

很多人会这样书写:

1
2
3
:not(article) p {
    margin: 0;
}

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

其中就包括这样的场景:

1
2
3
4
5
<article>
    <section>
        <p>margin此时也是0!<p>
    </section>
</article>

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

正确的书写应该是:

1
2
3
4
5
6
p {
    margin: 0;
}
article p {
    margin: 1em 0;
}

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

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

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

结束语

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

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

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - CSS否定伪类:not()的正确认识

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论