:not()括号内只能写简单选择器，因规范强制要求；:not(.a):not(.b)兼容性好且逻辑为“且”，:not(.a,.b)是新语法、旧Safari不支持；嵌套:not()或含:has()均非法。
为什么 :not() 括号里不能写 :has() 或 :not()
因为 CSS 规范强制要求 :not() 的参数必须是「简单选择器」——它只接受单个类名（.active）、单个属性（[disabled]）、单个标签（button）或单个伪类（:checked）。像 :has(> .error) 是关系选择器，:not(.x) 本身已是函数式伪类，二者都不符合“简单”定义，浏览器直接当作语法错误丢弃整条规则。
常见现象：div:not(:has(> p)) { color: red; } 在 DevTools 里整行灰掉，控制台无报错，样式就是不生效。这不是兼容性问题，而是语法非法。
:not(.a):not(.b) 和 :not(.a, .b) 有什么实际区别？
前者是链式否定，所有现代浏览器（包括 Safari 12+）都支持；后者是 Level 4 新语法，仅 Chrome 105+、Firefox 103+、Safari 15.4+ 支持，Safari ≤15.3 会静默忽略整条规则。
-
button:not(.primary):not(.danger)✅ 安全，逻辑是“既不是 .primary，也不是 .danger” -
button:not(.primary, .danger)⚠️ 看似简洁，但在旧版 Safari 下等于没写 -
button:not(.primary:not(.large))❌ 嵌套结构，语法非法，所有浏览器都丢弃
多个 :not() 连用时，逻辑到底是“且”还是“或”？
是严格的“且”关系。元素必须同时满足所有 :not() 的否定条件才被选中。比如 li:not(.first):not(.last) 会排除所有带 .first 或 .last 的 li —— 即使某个 li 同时有这两个类，它依然被筛掉，因为它不满足“不是 .first”这个条件（为假），整个链就失效。
想排除“同时带 .a 和 .b”的元素，得写成 :not(.a.b)；想排除“带 .a 或 .b 中任意一个”，就必须用 :not(.a):not(.b)。
性能和可读性上容易被忽略的坑
:not() 不是过滤器，它是匹配流程中的一个否定步骤：浏览器先找所有父级元素，再逐一判断是否“不满足括号内条件”。DOM 节点越多，这个否定判断开销越大，尤其在 :not() 套复杂选择器时（如 :not([data-id][data-loaded])）。
更隐蔽的问题是优先级计算：input:not([type="hidden"]) 的 specificity 是 0-1-1（input 类型 + 属性伪类），但它和 input[type="text"] 对比时，谁赢取决于完整选择器权重，不是看写了几个 :not()。别指望靠堆 :not() 提升优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
