如何用CSS:not()伪类排除特定元素样式，简化选择器逻辑？

本文共计783个文字，预计阅读时间需要4分钟。

直接说结论：

为什么 :not(.disabled) 有时根本不起作用

常见错觉：以为 :not() 是“加个条件过滤”，实际它是「否定整个简单选择器」。CSS 规范要求 :not() 括号内只能写「单个简单选择器」（比如 .cls、[attr]、:hover），不能写组合器或复合逻辑。

• ✅ 合法：button:not(.primary)、a:not([href^="http"])
• ❌ 非法：button:not(.primary.btn)（多类名不算一个简单选择器）、div:not(.a > .b)（含后代组合器）
• ⚠️ 注意：input:not([type="hidden"]) 可用，但 input:not([type=hidden][disabled]) 在旧版 Safari 中会被整条忽略

替代 :not() 的更稳写法：层叠优先级 + 显式重置

当你要“给所有按钮加背景，但禁用按钮除外”，别只靠 :not() 一层扛，尤其在复杂组件中容易被后续规则意外覆盖。

• 推荐写法：

  button { background: #007bff; }<br>button.disabled,<br>button[disabled] { background: #ccc; }

• 优势：语义清晰、兼容性好（IE9+）、调试直观（DevTools 能明确看到哪条规则生效）
• 关键点：把“例外”单独写成一条规则，而不是试图在主规则里排除它

真正适合用 :not() 的典型场景

它最可靠的地方，是处理「单一、明确、无歧义」的排除条件，且目标元素本身结构干净。

立即学习“前端免费学习笔记（深入）”；

• 表单控件默认样式清理：input:not([type="checkbox"]):not([type="radio"]) { margin: 4px; }
• 跳过特定状态的伪类：a:not(:visited) { color: #007bff; }（注意：:visited 有隐私限制，部分属性不可设）
• 避免影响图标字体：span:not([class*="icon-"]) { font-size: 14px; }（利用属性选择器模糊匹配类名前缀）

容易被忽略的兼容性与性能细节

:not() 本身支持到 IE9+，但它的“括号内容”决定实际兼容边界。

• Safari 13.1 之前不支持 :not(:is()) 或 :not(:where())，所以别混用新函数
• 嵌套 :not() 如 :not(:not(.a)) 合法但无意义，还可能触发某些旧引擎解析异常
• 性能上无明显瓶颈，但过度依赖深层 :not()（如 div:not(.x):not(.y):not(.z)）会让选择器可读性陡降，维护成本上升

真正难的不是语法，是判断「这个排除逻辑，到底该由 CSS 层叠承担，还是交给 :not() 承担」——前者更可控，后者更简洁，但容错更低。