:not() 排除样式时必须确保被排除的选择器是「独立可验证」的，否则整条规则被浏览器完全丢弃；它否定的是整个简单选择器，不支持组合器或复合类名，推荐用层叠+显式重置替代。
直接说结论：用 :not() 排除样式时，必须确保被排除的选择器是「独立可验证」的，否则浏览器会整个丢弃该规则——不是“部分生效”，而是完全不生效。
为什么 :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() 承担」——前者更可控，后者更简洁，但容错更低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
