前段时间，偶然发现，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/
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！