如何用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() 一层扛，尤其在复杂组件中容易被后续规则意外覆盖。
本文共计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() 一层扛，尤其在复杂组件中容易被后续规则意外覆盖。