:not(:not(.x))完全失效，因其参数必须为简单选择器，而:not(.x)是函数式伪类、属复合结构，语法非法；现代浏览器直接丢弃整条规则，devtools中显示为灰掉，queryselector返回null。
为什么 :not(:not(.x)) 会完全失效
这不是兼容性问题，而是语法非法 —— 浏览器压根不解析它。:not() 的参数必须是「简单选择器」，而 :not(.x) 本身已是函数式伪类，属于复合结构，不能作为另一个 :not() 的输入。Chrome 100+、Firefox 95+、Safari 15.6+ 都直接丢弃整条规则，DevTools 中该 CSS 行会变灰，document.querySelector(':not(:not(.x))') 返回 null，控制台也无任何提示。
常见错误写法包括：
-
:not(.a:not(.b))—— 内部含伪类，解析失败 -
:not(:is(.active))——:is()不被允许 -
:not(div:nth-child(2))—— 含伪类 + 类型选择器，超纲
:not(.a, .b) 在 Safari ≤15.4 中静默失效
Level 4 规范支持逗号分隔的多参数写法，如 :not(.a, .b)，语义等价于「非(.a 或 .b)」。但 Safari ≤15.4（含 iOS 15.4）完全不识别这种语法，整条 CSS 规则被跳过，样式不生效，且 DevTools 显示为 Invalid CSS。
安全替代方案只有链式写法：:not(.a):not(.b)。它在 Safari 12+、Chrome 57+、Firefox 52+ 全面可用，且语义明确。
注意：:not(.a):not(.b) 是“且”关系，不是“或”；它排除所有带 .a 或带 .b 的元素，哪怕某元素同时有两者，也会被筛掉。
:not() 的性能开销比你想象中大
浏览器匹配 :not() 时，并非先找“满足条件”的元素再取反，而是对每个候选元素执行一次否定判断。例如 ul > li:not(.special)，需遍历所有 li，逐个检查是否「不含有 .special 类」。DOM 节点越多，开销越明显。
更隐蔽的问题是优先级陷阱：
-
button:not(.primary)的 specificity 是0-1-1（button + class），高于单纯的button（0-0-1） - 这意味着它可能意外覆盖其他本应生效的低权规则，比如
.btn { ... } - 调试时别只看是否命中
:not()，要打开 DevTools 的 Computed 标签页，确认最终生效的是哪条规则
哪些写法看似合理实则无效
很多开发者凭直觉写的 :not() 实际上浏览器根本不认。最典型的是混入空格或组合器：
-
:not(.menu li)—— 含空格，是后代选择器，非法 -
:not(div > p)—— 含子选择器，非法 -
:not(.a.b)—— Level 4 合法，但 Safari ≤15.4 静默忽略（即使它只是两个类连写） -
:not(::before)—— 伪元素不允许，直接失效
真正稳妥的参数只有：.cls、#id、[attr]、div、:hover（单个伪类）、input:disabled（标签 + 单伪类仍算简单）。只要括号里出现空格、逗号（除非是 Level 4 多参数且目标浏览器支持）、>、+、~，就立刻失效。
复杂排除逻辑往往不如显式重置：与其写 input:not([type="hidden"], [disabled], :read-only)，不如用 input { ... } + input[type="hidden"], input[disabled], input:read-only { ... } —— 更易读、兼容性更好、调试路径更清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
