:not()仅支持简单选择器，复合选择器会导致规则静默失效；优先级按内部选择器累加；多条件排除需用英文逗号分隔；动态类名不影响其生效，但需确保dom真实状态匹配。
not伪类写错选择器就完全失效
浏览器对 :not() 里的选择器要求极严：它只接受「简单选择器」，比如 .cls、#id、[attr]、div，但不能是 .a .b、div > p 或 :hover。一旦写了复合选择器，整个 :not() 规则会被直接忽略——不是报错，而是静默丢弃，样式照常应用，你根本看不出哪里坏了。
常见错误现象：div:not(.header .nav) 看起来想排除「.header 下的 .nav」，实际无效；a:not(:visited) 在多数浏览器里也不合法（:visited 是伪类，且受隐私限制）。
- 能用的：
:not(.disabled)、:not([data-ignore])、:not(button) - 不能用的：
:not(.menu li)、:not(div:first-child)、:not(.btn:hover) - 替代思路：把“要排除”的逻辑，改成“只对剩下的显式声明”——比如给所有按钮加默认样式，再单独给
.disabled覆盖
not伪类优先级比你想象中高
:not() 本身不增加权重，但它包裹的选择器会参与计算。比如 button:not(.primary) 的优先级 = button（0,0,1,0） + .primary（0,0,1,0） = 0,0,2,0；而单纯写 button 只有 0,0,1,0。这意味着，哪怕你本意是“降权排除”，结果反而可能压过其他规则。
使用场景：当你发现加了 :not() 后，原本生效的样式突然不生效了，大概率是优先级反超了。尤其在用 CSS-in-JS 或原子化工具时，容易误判权重。
立即学习“前端免费学习笔记（深入）”；
- 检查方式：打开 DevTools，看被划掉的样式是不是因为被
:not()规则覆盖 - 安全做法：避免嵌套复杂选择器，比如别写
form :not(.hidden) input，改用form input:not(.hidden) - 兼容性注意：IE 完全不支持
:not()多参数（如:not(.a, .b)），得拆成两条规则
多条件排除必须用逗号分隔，不能空格
CSS 标准里，:not() 只接受一个参数，但这个参数可以是「逗号分隔的选择器列表」，用来实现“排除 A 或 B”。写成 :not(.a .b) 是错的，但 :not(.a, .b) 是对的——注意是英文逗号，不是空格，也不是 or 关键字。
常见错误现象：开发者手抖打成 :not(.a .b) 或 :not(.a || .b)，结果毫无效果；或者误以为 :not(.a):not(.b) 和 :not(.a, .b) 等价，其实前者是“既不是 .a 也不是 .b”，后者是“不是（.a 或 .b）”，语义相同，但写法不同。
- 正确写法：
input:not([type="hidden"], [disabled]) - 错误写法：
input:not([type="hidden"] [disabled])（空格 → 后代选择器 → 无效） - 性能提示：多个逗号选项不会明显拖慢渲染，但别塞十几项——真有那么多样式要排除，该重构 HTML 结构了
JavaScript 动态类名会让 :not() 失效吗？
不会。只要 class 属性真实存在，:not(.active) 就能实时响应增删。问题出在「时机」和「拼写」：JS 改 class 后，样式立即重算；但如果你 JS 里写的是 el.classList.add('Actvie')（大小写错），或用 setAttribute('class', '...') 覆盖丢了原有类，:not() 就会按实际 DOM 判断，而不是按你“以为”的状态。
容易踩的坑：在 Vue/React 中，用 v-if 或 key 触发元素重建，旧节点彻底消失，:not() 自然不再起作用；但这不是伪类的问题，是 DOM 节点换了。
- 调试技巧：在控制台手动执行
$0.classList.toggle('disabled')，看样式是否即时变化 - 注意框架陷阱：某些 SSR 渲染后，JS 水合（hydration）前，服务端生成的 HTML 可能不含动态类，导致首屏样式与预期不符
- 真正不可靠的不是
:not()，而是依赖它做关键交互逻辑——比如用button:not(:disabled)绑定 click，不如直接监听并判断el.disabled
:not() 后，没去 DevTools 里点开那个元素，亲眼看看 computed styles 里它到底匹配了哪些规则。 
