:not() 只接受单个简单选择器，不支持复合选择器或逗号分隔，误用会导致规则被忽略；合法参数仅限类名、ID、属性、元素名及基础伪类，多条件排除需链式组合或改用JS控制。
为什么 :not() 会意外排除不该排除的元素
根本原因在于 :not() 只否定「单个简单选择器」，不是逻辑上的“排除所有匹配项”。比如 div:not(.a .b) 是非法的——.a .b 是后代复合选择器，:not() 不接受它。浏览器直接忽略整个规则，而不是按你想象的“选 div 但排除其中包含 .a .b 的”。常见误写还有 :not(:hover, :focus)（逗号在 :not() 内无效，应写成两个独立伪类组合）。
:not() 只支持单个简单选择器，怎么写才合法
合法的参数只能是：类名、ID、属性、元素名、伪类（如 :first-child），且不能含空格、逗号或关系符。正确用法示例：
-
button:not([disabled])✅ 排除带disabled属性的 button -
li:not(.active)✅ 排除有.active类的 li -
a:not(:visited)✅ 排除已访问过的链接 -
input:not([type="hidden"]):not([type="submit"])✅ 连续多个:not()组合，模拟“多条件排除”
想排除某类结构下的元素？必须靠限定父级范围
比如目标是“排除所有在 .modal 内的按钮”，不能写 button:not(.modal button)（非法），而要改写为：
body :not(.modal) button { /* 样式 */ }但这仍不保险——它实际选中的是「祖先不是 .modal 的 button」，语义偏差大。更可靠的做法是显式限定作用域：
立即学习“前端免费学习笔记（深入）”；
- 给正常按钮加统一类，如
.primary-btn，再写.primary-btn:not(.modal .primary-btn) - 或用 BEM 风格命名，让排除逻辑落在类名层级上：
.btn--default:not(.modal__btn--default) - 如果 JS 可控，动态加/删 class 比纯 CSS 排除更稳定
嵌套 :not() 和优先级容易引发冲突
:not() 的权重和它内部的选择器一致，比如 div:not(.foo) 权重等同于 div.foo（都是 0,1,1）。这意味着：
- 若同时存在
div.foo { color: red; }和div:not(.foo) { color: blue; }，前者会覆盖后者对.foo元素的设置，但不会影响:not()的匹配结果 - 嵌套写法如
div:not(:not(.bar))纯属冗余，等价于div.bar，还增加解析负担 - 在 CSS-in-JS 或 Shadow DOM 中，
:not()的行为可能受封装边界影响，需实测验证
真正难处理的，是当你要排除的条件本身依赖 DOM 层级深度或动态状态时——这时候 CSS 选择器能力已到边界，该交由 JS 控制 class 切换。
