:not()仅支持简单选择器，禁用嵌套伪类与复杂选择器；其否定逻辑影响性能与可读性，适合稳定少例外场景；与:is()混用需注意权重和兼容性。
伪类 :not() 不能嵌套其他伪类或复杂选择器
很多人试图写成 :not(:hover) 或 :not(.btn-primary) 是合法的，但一旦写成 :not(.btn:not(.disabled)) 就会失效——CSS 规范明确禁止 :not() 的参数中包含另一个 :not()、:nth-child()、:is() 等伪类，也不支持后代选择器（如 .nav a）。
真正能放进 :not() 括号里的，只有：简单选择器（.class、#id、[attr]、div）、属性选择器（[type="submit"]）、以及单个伪类（如 :disabled、:checked）。
-
:not(.active)✅ 合法 -
:not([data-state="loading"])✅ 合法 -
:not(button:disabled)✅ 合法（标签 + 伪类，仍算“简单”） -
:not(.menu li)❌ 非法：含空格，是后代选择器 -
:not(:not(.hidden))❌ 非法：嵌套:not()
:not() 对性能和可读性的影响常被低估
浏览器在匹配 :not() 时，会先找出所有父级元素，再逐个检查是否「不满足括号内条件」。这意味着：ul > li:not(.special) 实际上比 ul > li 多一次否定判断，尤其在大量 DOM 节点下可能拖慢渲染。
更隐蔽的问题是可读性陷阱：当用 :not() 替代显式类名时，样式意图容易模糊。
立即学习“前端免费学习笔记（深入）”；
- 写
button:not(.ghost)看似省事，但后续加新按钮类型（比如.outline）时，它也会被这条规则命中——你本意可能是「只作用于默认按钮」，但否定逻辑无法表达这种排他性 - 相比
button.default，button:not(.ghost):not(.outline)更难维护，也更容易漏掉新增状态 - 调试时，DevTools 的样式面板里看到
button:not(.ghost)，你得反向推导哪些元素被排除了，而不是一眼看出「这是默认款」
用 :not() 简化「例外处理」场景最稳妥
真正适合 :not() 的地方，是那些明确、稳定、数量少的例外。比如统一设置表单控件边框，但禁用 textarea；或给所有链接加下划线，但跳过已设 class="skip-underline" 的。
input, select, number {
border: 1px solid #ccc;
}
<p>/<em> 只排除 textarea，不碰其他 input 类型 </em>/
input:not(textarea) {
border-radius: 4px;
}</p><p>a:not(.skip-underline):not([aria-hidden="true"]) {
text-decoration: underline;
}这类写法清晰表达了「默认适用，少数例外」的语义，且例外本身不易变动。一旦例外变多（比如要排除 .skip-underline、[data-no-decorate]、.nav-link），就该转为显式正向选择器，而非堆砌 :not()。
和 :is()、:where() 混用需注意权重与兼容性
现代 CSS 中，:not() 常和 :is() 组合来表达「除了某几类之外的所有」，例如：
a:not(:is(.nav-link, .skip-underline, [data-external])) {
color: var(--link-color);
}但要注意两点：
-
:is()会取其参数中最高优先级的选择器权重，所以:not(:is(.btn, a:hover))的权重等同于a:hover（即 0,1,1），而单独写a:not(.btn):not(:hover)权重更低（0,1,0）——这会影响样式覆盖顺序 -
:is()和:not()组合在 Safari 15.4 之前不支持，若需兼容旧版 iOS/Safari，应避免，改用 BEM 或额外 class 控制
真正需要简化多条件排除时，与其硬凑 :not() + :is()，不如用预处理器生成 class 列表，或直接靠 HTML 结构分层控制。
