:not()不支持嵌套和多参数，因css3规范限定其参数必须为单个简单选择器；:not(.a, .b)语法非法，浏览器整条规则静默丢弃，正确写法是:not(.a):not(.b)。
为什么 :not(.a, .b) 在 CSS3 中完全不生效
因为 CSS3 规范只允许 :not() 括号内写一个「简单选择器」，逗号分隔的多选器（如 .a, .b）是非法语法。浏览器不会部分解析，而是整条规则静默丢弃——DevTools 里直接划掉该行，样式根本不会应用。
-
div:not(.skip)✅ 合法：单个类名 -
input:not([type="hidden"])✅ 合法：单个属性选择器 -
a:not(:hover)✅ 合法：单个伪类 -
div:not(.a, .b)❌ 无效：CSS3 不支持，整条规则失效 -
p:not(.error .warning)❌ 无效：含空格，是后代选择器，非法
正确写法只能是链式 :not(.a):not(.b)
多个排除条件必须连写多个 :not()，逻辑是“且”关系：元素必须同时不匹配所有括号内的条件，才会被选中。
-
button:not(.primary):not(.ghost):not(.outline)→ 只匹配既没.primary、也没.ghost、也没.outline的 button - 顺序无关：
:not(.a):not(.b)和:not(.b):not(.a)效果一致 - 如果某元素同时带
.a和.b，它依然被排除——这符合预期，不是 bug - 性能上无明显差异，但链式越长，浏览器否定判断次数越多，DOM 节点极多时可感知
常见误用场景：想排除“某类容器下的子元素”
:not() 只作用于当前元素自身，无法基于祖先或后代关系过滤。例如 .sidebar p:not(.vp-raw) 只排除那些 p 自己带 .vp-raw 类的情况，对 .vp-raw 内部的子 p 完全无效。
- ❌ 错误目标：
p:not(.sidebar p)（语法错，含空格） - ❌ 错误理解：
:not(.sidebar) p并不能跳过.sidebar下所有p，它只匹配父级不是.sidebar的p（前提是这些p的**直接父元素**不为.sidebar） - ✅ 可行替代：
p { background: #f0f0f0; }+.sidebar p { background: transparent; } - ⚠️ 注意：
.sidebar p权重更高，能可靠覆盖；不要依赖:not()实现这种跨层级排除
兼容性与调试要点
CSS3 的链式 :not() 在 IE9+、所有现代浏览器均稳定支持。但真正容易被忽略的是：它不提供“样式撤销”，只决定是否匹配；最终渲染结果仍由层叠和优先级共同决定。
- 比如
button:not(.primary) { margin-right: 8px; }和.primary { margin-right: 0; }同时存在时，后者权重低，可能不生效——应确保.primary规则权重 ≥ 前者，或改用button.primary - 调试时务必打开 DevTools 的 Computed 标签页，确认哪条规则被应用、哪条被 override，而不是只看 Elements 面板里是否“命中”了
:not() - IE8 及更早版本完全不支持
:not()，若需兼容，必须用 JS 动态加 class 或服务端降级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
