CSS伪类:not()可以嵌套使用吗:如何嵌套？

: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() 就已固化结果，后续不会重算。