CSS :not()伪类选择器已支持复杂参数

这篇文章发布于 2022年02月12日,星期六,23:07,归类于 CSS相关。 阅读 4903 次, 今日 3 次 6 条评论

 

占位图:not css

CSS :not()伪类的基本用法在3年前有介绍过,详见“CSS :not伪类可能错误的认识”这篇文章。

前段时间,偶然发现,Chrome 浏览器和 Firefox 浏览器中,:not() 伪类都已经支持复杂选择器了(兼容性见下图),迫不及待给大家介绍下。

支持复杂选择器列表兼容性

新语法指的是什么

在过去,如果你想让对 CSS 选择器进行多个否定,只能使用下面这样的语法,例如:

body:not([class]):not([style])::before {
    content: '精彩内容即将呈现';
}

而现在,可以使用下面的写法了:

body:not([class], [style])::before {
    content: '精彩内容即将呈现';
}

也就是在括号中使用逗号分隔,书写多个选择器列表。

举个例子,HTML如下:

<button>没有class</button>
<button class="a">class="a"</button>
<button class="b">class="a b"</button>
<button class="a b">class="a b"</button>

样式代码为:

button:not(.a, .b) {
    --zhangxinxu: deepskyblue;
    background: var(--zhangxinxu);
}

实际的渲染效果如下所示:

可以看到,只有第一个按钮的背景色是“深天蓝色”,其他几个匹配了 .a 或者 .b 类名的按钮依然是系统默认的按钮背景色。

说明你访问的当前浏览器是支持 :not(.a, .b) 这种写法的。

新的语法除了书写上更简洁了之外,还有没有其他什么变化或者影响呢?有!

有什么写法以外区别?

区别就在于不再会有那么高的权重了,从而给样式重置带来过多的困扰。

例如 button:not(.a):not(.b) 的权重(也称“优先级”)等同于 button.a.b,但是,button:not(.a, .b) 的选择器权重等同于 button.a 或者 button.b

为了验证这个结论,我们可以看下这个例子:

<h4>级联测试</h4>
<zxx-not1 class="a b">zxx-not1且class="a b"</zxx-not1>
<zxx-not1 class="c d">zxx-not1且class="c d"</zxx-not1>

<h4>并列测试</h4>
<zxx-not2 class="a b">zxx-not2且class="a b"</zxx-not2>
<zxx-not2 class="c d">zxx-not2且class="c d"</zxx-not2>

上面的 HTML 对比测试的结构和类名都是一模一样的,然后测试的 CSS 样式是这样的:

.c.d {
    background: #333;
    color: #fff;
}
zxx-not1:not(.a):not(.b),
zxx-not2:not(.a, .b) {
    background: #aaa;
    color: #333;
}

无论是 .c.d,还是 :not(.a):not(.b) 还是 :not(.a, .b) 匹配的都是 class="c d" 这个元素,于是,最终的渲染样式如何,就看这 3 个选择器哪个优先级高了。

计算规则如下:

  • .c.d 的优先级是两个类名;
  • zxx-not1:not(.a):not(.b) 的优先级是一个标签选择器+两个类名,因此,大于 .c.d,所以,<zxx-not1 class="c d"> 显示灰色背景,深色文字;
  • zxx-not2:not(.a, .b)选择器的优先级是一个标签+一个类名,因此,权重小于 .c.d,所以 <zxx-not2 class="c d"> 显示的是 .c.d 选择器对应的样式,也就是黑底白字。

最终的效果如下截图所示:

优先级测试结果截图

眼见为实,您可以狠狠地点击这里:CSS :not伪类复杂参数权重测试demo

就说这些,结束了

周末在家,忙到现在,抽时间把文章更新列表中估计写作时间最短的先发布下,其他文章下周末抽时间写写吧。

文章更新列表

想做的和要做的事情太多,分身乏术,这些事情啊,还不是说可以请人代劳那种,是时候推掉一些不必要的事务了。

随便一点牢骚,感谢阅读,欢迎,比心。

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 寻源舍说道:

    以前在CSS权威指南学习过这一伪类,当时还在感叹not伪类不支持复杂选择器的特性,时过境迁,如今not伪类终于支持复杂选择器了,也许下一步该支持否定伪元素了吧。

  2. juln说道:

    上次用了一波,然后ui走查被说了,有兼容问题😂

  3. 阿晋说道:

    “想做的和要做的事情太多,分身乏术” 确实是这样的

  4. dy说道:

    试过这么写
    input:not(input[type=’radio’]) 在有些浏览器有问题
    把sass的@extends搞得无效了(用到该@extends的)

    最终改成input:not([type=’radio’])

  5. akrios说道:

    坚持输出不容易啊

  6. 代码如诗如画说道:

    感谢输出