前段时间，偶然发现，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) 匹配的都是  这个元素，于是，最终的渲染样式如何，就看这 3 个选择器哪个优先级高了。

计算规则如下：

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

原文来自：https://www.zhangxinxu.com/wordpress/2022/02/css-not-pseudo-class-list-argument/

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11173