:not() 不能排除特定子元素，只否定自身是否匹配简单选择器；含空格或组合符的选择器会导致整条规则被浏览器丢弃；安全写法需链式使用简单选择器并注意特异性与层叠逻辑。
:not() 在 CSS3 中**不能直接排除“特定子元素”**，它只否定元素自身是否匹配括号内的简单选择器；所谓“排除子元素”，本质是误读了作用对象——:not() 作用于当前被选中的元素，不是它的后代。
为什么 :not(.parent .child) 完全不生效
浏览器遇到含空格、>、+ 或 ~ 的写法，会直接丢弃整条 CSS 规则（DevTools 里都看不到）。这不是“没效果”，而是根本没解析成功。
-
.container div:not(.sidebar p)❌ 非法：括号内.sidebar p是后代选择器，不是简单选择器 -
div:not(.a.b)✅ 合法：多类名无空格，仍算一个简单选择器 -
input:not([type="hidden"][disabled])⚠️ 旧版 Safari 可能整条忽略（多属性连写虽合规，但解析器有差异）
想跳过某容器下的子元素？别硬塞进 :not()
例如：“给所有 p 加背景，但 .sidebar p 不要”。你无法用 :not() 反向推导作用域，必须换思路：
- ✅ 正向限定 + 显式重置：
p { background: #f0f0f0; }+.sidebar p { background: transparent; } - ✅ 用父级否定（需 DOM 结构稳定）：
:not(.sidebar) p—— 这选中的是“父级不是.sidebar的p”，若p直接挂在body下才生效 - ❌
p:not(.sidebar p)或p:not(.sidebar > p)：语法非法，规则被静默丢弃
真正安全的多条件排除写法
CSS3 不支持 :not(.a, .b)，必须链式书写。逻辑是 AND（同时不满足所有条件），不是 OR：
-
button:not(.primary):not(.disabled):not(.ghost)→ 仅匹配既无.primary、也无.disabled、也无.ghost的 button - 顺序不影响匹配结果，但建议把更稀有的条件放前面（如先
:not([data-state="loading"])），便于人眼快速判断意图 - 每个
:not()都叠加特异性：div:not(.a):not(.b)权重 =div+.a+.b，可能意外覆盖其他规则
最常被忽略的一点：当你写 button:not(.disabled)，它只是让带 .disabled 的按钮不走这条规则；如果还有 .disabled { opacity: 0.4; }，那最终样式还是由层叠和优先级决定——:not() 不是“撤销样式”，只是“不参与匹配”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
