safari ≤15.4 静默忽略多参数 :not(.a, .b)，应改用 :not(.a):not(.b)；ie 全系列不支持 :not()；链式写法表示“且”非“或”；伪类顺序推荐 :not() 在前；特异性等于内部选择器权重之和。
Chrome/Firefox/Safari 支持多参数:not(.a, .b)，但 Safari ≤15.4 会静默忽略
不是所有现代浏览器都真正支持 CSS Level 4 的 :not() 多参数语法。Safari 在 15.4 及更早版本中遇到 :not(.a, .b) 会直接丢弃整条规则，DevTools 里显示为“Invalid CSS”——不是样式不生效，是压根没解析。
- ✅ 安全写法：
:not(.a):not(.b)（所有主流浏览器均支持） - ❌ 风险写法：
:not(.a, .b)（Chrome 105+、Firefox 103+ 正常，Safari ≤15.4 失效） - 检查方式：打开 Safari 开发者工具 → Elements → 查看对应样式是否被划掉
- 构建时若用 PostCSS，
postcss-preset-env默认不展开多参数:not()，需手动配notParens: true才转译
:not() 在 IE 中完全不可用，连单参数都不支持
IE6–IE11 全系列不识别 :not()，哪怕写最简单的 div:not(.active)，整条 CSS 规则都会被跳过，且无任何警告或降级行为。
- ❌ 不要指望 autoprefixer 加前缀——
:not()没历史厂商前缀，它就是没实现 - ✅ 替代方案：用 class 显式标记例外，比如把
input:not([type="hidden"])拆成input.regular，JS 或模板层控制 class 分配 - ✅ 或用 Selectivizr（需 jQuery + polyfill），但它只补基础匹配，不支持运行时 DOM 变更重匹配
- 注意：
document.querySelectorAll(':not(.x)')在 IE8 会直接抛SyntaxError
链式 :not() 的逻辑容易误读为“或”，其实是“且”
:not(.a):not(.b) 的真实含义是“既不匹配 .a，也不匹配 .b”，不是“排除 .a 或 .b 中的任意一个”。这点在调试时极易搞反。
- 如果一个元素同时有
.a和.b，它会被排除 ✅（符合预期） - 但如果只想排除“带
.a或.b的任意一种”的元素，链式写法已足够，无需改写 - 常见错误：以为
:not(.a.b)能排除同时含两个类的元素——它虽是 Level 4 合法语法，但 Safari ≤15.4 仍静默忽略，应坚持用:not(.a):not(.b) - 想表达“排除同时有 A 和 B 的元素”？
:not(.a.b)理论上可以，但兼容性差；更稳做法是加语义类如.excluded-both
伪类组合顺序影响可读性，但不影响逻辑结果
a:not(.external):hover 和 a:hover:not(.external) 渲染效果一致，但前者更易读、老浏览器兼容性也略好。
- ✅ 推荐把
:not()放在其他伪类之前，比如input:not(:disabled):focus - ❌ 避免
input:focus:not(:disabled)，部分旧引擎（如 Safari 13）对这种顺序解析不稳定 -
:not()的优先级等于其内部选择器权重之和，input:not([type="text"])特异性是 (0,0,2,1)，和input[type="text"]相同，别指望它自动降权 - 真正难调试的不是语法，而是继承干扰——比如
:not(p){color:red}看似不选p，但p继承了父级color，得换border这类不可继承属性验证
:not() 最容易出问题的地方不在写法本身，而在于团队对“否定逻辑”的认知偏差：它不表达意图，只执行过滤。当例外从 1 个变成 3 个以上，维护成本就远超加几个 class。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
