CSS :not()伪类选择器已支持复杂参数-工具盒子

占位图: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);
}

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

没有class class="a" class="a b" class="a b"

可以看到，只有第一个按钮的背景色是"深天蓝色"，其他几个匹配了 .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 选择器对应的样式，也就是黑底白字。

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

优先级测试结果截图