:not()仅否定紧邻前一个选择器，不穿透DOM层级；排除容器下子元素应使用层叠重置而非嵌套:not()；链式:not()可排除多个类但不可替代作用域限定，语法错误会静默失效。
直接写 :not(.target) 只能排除自身带该 class 的元素
很多人想用 div:not(.sidebar) p 来“选中所有不在 .sidebar 里的 p”，但这条规则实际匹配的是：父级是 div、且这个 div 不带 .sidebar 类、内部有 p 的结构。它**完全不关心 p 自身是否在 .sidebar 内部嵌套多层**。如果一个 p 在 <div class="sidebar"><section><p></p></section></div> 里，它照样会被匹配——因为它的直接父级 div 带了 .sidebar，但这条规则根本没查到它。
也就是说：:not() 否定的只是它**紧挨着的前一个选择器**，不是整条路径，也不穿透 DOM 层级。
-
article p:not(.ignore)→ 排除的是p自身带.ignore类，不管它在 article 里哪一层 -
article:not(.disabled) p→ 排除的是article自身带.disabled类，然后才找它里面的p -
article p:not(.disabled)和article:not(.disabled) p是两回事，别混
想排除「某容器下的所有子元素」？别硬套 :not()，改用层叠重置
例如要给所有 p 加边框，但 .sidebar p 和 .modal p 例外。下面这种写法是错的：
code>p:not(.sidebar p), p:not(.modal p) { border: 1px solid #ccc; }
语法非法，浏览器直接丢弃整条规则。
立即学习“前端免费学习笔记（深入）”；
正确做法是分两步：
- 先设通用样式：
p { border: 1px solid #ccc; } - 再显式覆盖例外：
.sidebar p, .modal p { border: none; }
这样逻辑清晰、兼容性好（IE9+）、DevTools 里一眼能看出哪条生效。比任何 :not() 嵌套都可靠。
链式 :not() 可以排除多个 class，但不能替代作用域限定
比如要选中所有不带 .primary 也不带 .danger 的按钮，可以写：
code>button:not(.primary):not(.danger) { padding: 8px 16px; }
这合法，也常用。但它只管按钮自己有没有这两个类，不看它是不是在某个禁用区域里、有没有被 JS 动态加了其他 class。
注意点：
- CSS4 允许
button:not(.primary, .danger)，但 Safari ≤ 15.6 和部分旧安卓 WebView 不支持，生产环境建议坚持链式写法 - 不要写
button:not(.primary.btn)—— 多个类名连写是合法简单选择器，但语义上它等价于 “同时含 .primary 和 .btn”，而你想排除的可能是其中任意一个，这时就得拆成两个:not() - 链式越多越难读，
div:not(.a):not(.b):not(.c):not(.d)这种建议转为 class 分组或 JS 控制
真正难的不是怎么写，而是「该不该用 :not()」
当你发现要排除的条件开始涉及层级、状态组合、或 JS 动态控制时，:not() 就容易变成维护黑洞。比如：
- 想排除 “在
.loading状态下的.form-item里的input” —— 这已经超出:not()能力范围，得靠 class 命名约定或 data 属性 - 用
[data-exclude]配合:not([data-exclude])比猜 DOM 结构靠谱得多 - 一旦出现优先级冲突（比如
.btn-primary规则权重更高），:not(.primary)即使命中，也可能被覆盖 —— 这时候你得看 computed styles，而不是盯着选择器是不是写了:not
最常被忽略的一点：:not() 规则一旦语法出错，浏览器不是报错，而是静默丢弃。你看到样式没生效，可能根本不是逻辑问题，而是括号里写了空格、用了逗号、或者嵌套了伪类。
