:not() 不支持嵌套，因参数必须为简单选择器，:not(:not(.active))等写法语法非法，现代浏览器直接忽略整条规则；排除多个类应使用多:not()串联，如button:not(.primary):not(.danger)。
:not() 嵌套写法直接无效，浏览器会忽略整条规则
不是“不推荐”，而是语法非法 —— :not(:not(.active)) 这类写法在 Chrome 100+、Firefox 95+ 等现代浏览器里会被当作无效选择器直接丢弃，开发者工具中该 CSS 规则会灰掉，像被注释了一样；document.querySelector(':not(:not(.x))') 返回 null，连控制台警告都不会触发。
根本原因在于：:not() 的参数必须是「一个简单选择器」（simple selector），而 :not(.active) 本身已是函数式伪类，属于复合结构，不能作为另一个 :not() 的参数。
-
:not(.a)✅ 合法：参数是类选择器 -
:not([disabled])✅ 合法：参数是属性选择器 -
:not(:hover)✅ 合法（Level 3 支持）：参数是伪类 -
:not(:not(.a))❌ 无效：参数本身是函数，违反简单选择器约束 -
:not(.a:not(.b))❌ 无效：内部含伪类嵌套，解析失败
想排除多个类？用多:not()串联，不是嵌套
要选“既不是 .primary 又不是 .danger”的按钮，得写成 button:not(.primary):not(.danger)，而不是 button:not(.primary, .danger)（后者在 Level 3 不合法，Level 4 才支持逗号分隔）。
注意：多个 :not() 是“且”关系，不是“或”。li:not(.first):not(.last) 排除的是同时不含这两个类的 li；如果某个 li 同时有 .first 和 .last，它仍会被排除 —— 因为它满足任一 :not() 的否定条件（即“不是 .first”为假，“不是 .last”也为假，整条链失效）。
- ✅ 正确写法：
a:not(.skip):not([data-ignored]) - ⚠️ 容易误解：
a:not(.skip, [data-ignored])—— Level 3 下语法错误；Level 4 虽支持，但需确认目标浏览器兼容性（Safari 15.4+、Chrome 102+） - ❌ 错误目标：
a:not(.skip):not(:not([data-ignored]))—— 第二个:not()嵌套，整条无效
Level 4 的 :not(selector, selector) 不是嵌套，是参数扩展
所谓“CSS Selectors Level 4 支持多参数”，指的是 :not() 的括号内可接受逗号分隔的选择器列表，例如 :not(.a, .b, :disabled)。这仍是单层结构，不是嵌套 —— 它等价于逻辑“非（.a 或 .b 或 :disabled）”，浏览器内部按 OR 合并后取反。
但要注意兼容边界：
- 这个语法在 Safari 中直到 15.4 才完整支持，旧版 Safari 会静默忽略整条规则
-
:not(div, p)合法，但:not(div p)依然非法（含空格的组合选择器不被允许） - 优先级不变：
:not(.a, .b)的 specificity 仍是 0-1-0，和:not(.a)一样
替代嵌套的真正可行方案
当你要表达“排除带 A 类但不带 B 类的元素”这类复杂逻辑时，:not() 无能为力 —— 它无法做条件组合判断。此时只能换思路：
- 加 wrapper 类，把作用域收窄，比如用
.form-body input:not([disabled])替代试图在全局筛“非禁用且非隐藏” - 用更具体的选择器覆盖，例如先写
input { border: 1px solid #ccc; }，再写input[disabled], input.hidden { border: none; } - JS 动态加 class 控制，尤其涉及状态联动（如
:hover+:focus组合排除）时，CSS 本身已超出能力范围
最常被忽略的一点：:not() 的匹配发生在样式计算阶段，它不感知 DOM 变化时机。比如 div:not(:has(> img))（需 :has() 支持）看似能动态排除，但若图片是 JS 异步插入，首次渲染时该 :not() 就已固化结果，后续不会重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
