:not()样式未生效的根本原因是其仅支持简单选择器，禁止层级、空格及复合伪类；实操应避免嵌套过深、优先使用正向类名，并注意IE兼容性与性能损耗。
用 :not() 反选时，为什么样式没生效？
常见现象是写了 :not(.active) 却发现所有元素都中招了，或者部分该排除的没排除。根本原因是 :not() 只能接受「简单选择器」——不能写 :not(.nav li)，也不能写 :not(div .item)，连空格、后代、子代符号都不允许。:not() 里只能放类名、ID、属性、伪类（如 :hover），且必须是单个、无层级的表达式。
实操建议：
- 想排除某个类的所有兄弟元素？别写
:not(.disabled):hover这种复合条件，先确保目标元素本身没被其他规则覆盖优先级 - 需要多条件排除？拆成多个
:not()嵌套，比如:not(.disabled):not(.loading)，但注意嵌套深度不支持无限展开 - 浏览器兼容性：IE9+ 支持基础
:not()，但 IE 不支持:not()里传伪类（如:not(:checked)），实际项目中若需兼容旧版，得用 JS 补位或改用显式类控制
:not() 和显式类名哪个性能更好？
纯 CSS 层面，:not() 的计算开销略高于普通类选择器，尤其当它出现在复杂选择器链开头（如 ul > li:not(.hidden) a）时，浏览器要先匹配所有 li，再逐个判断是否含 .hidden。而 .visible a 是直接按类名哈希查找，更快。
但真实瓶颈往往不在这里。更关键的是可维护性：
立即学习“前端免费学习笔记（深入）”；
- 用
:not()容易掩盖状态逻辑，比如button:not([disabled])看似简洁，但按钮可能还有loading、error等状态，全靠:not()排除会越来越难读 - 推荐策略：主状态用正向类（
.is-active、.is-disabled），反选只用于极简场景，例如重置默认边框：input:not([type="hidden"]) { border: 1px solid #ccc; } - 避免在关键动画或高频渲染区域（如滚动列表项）用深层
:not()链，CSS 引擎优化有限，可能触发重排
哪些伪类能放进 :not()？哪些不行？
能放进的：基础伪类如 :checked、:disabled、:focus、:target，以及属性选择器如 [data-state="open"] —— 它们都是「单一、无上下文依赖」的判定。
不能放进的：
-
:nth-child(2n)：虽然语法合法，但某些旧版 Safari 对带函数参数的:not()支持不稳定，建议避开 -
:hover：:not(:hover)在规范中是允许的，但实际效果常不符合直觉（比如鼠标移入时规则失效，移出才生效），极少有合理使用场景 - 自定义伪类（如
:--my-state）或未来拟议的伪类（如:has()）目前均不可用，会直接导致整条规则被忽略
替代 :not() 的更稳妥写法
当 :not() 开始变复杂或行为不可控，优先考虑降级方案：
- 把“默认样式 + 覆盖”变成“仅对目标设样式”，比如不用
div:not(.skip) { color: red; }，改用.process { color: red; }，然后在 HTML 中显式加类 - 用属性选择器代替类排除：
[data-role="button"]:not([disabled])比.btn:not(.disabled)更语义化，也更容易和 JS 状态同步 - 真正动态的排除逻辑（如根据数据字段值跳过某项），交给 JS 控制类名，CSS 只负责消费，不承担判断职责
复杂点在于：:not() 看似省事，但一旦嵌套两层以上或混入伪类，调试成本会指数上升。多数时候，多敲几个字符写清楚类名，比花十分钟猜为什么 :not(.a):not(.b):not(.c) 漏掉了一个元素更省时间。
