:not()不是“关掉样式”，只是“不选中”，最终样式由层叠和优先级决定；括号内仅限一个简单选择器，写错则整条规则静默失效；多条件须链式书写如:not(.a):not(.b)，排除某容器下子元素应改用作用域限定或层叠覆盖。
为什么加了 :not() 还是样式冲突？
因为 :not() 不是“关掉样式”，它只是“不选中”——最终渲染结果由层叠顺序和优先级共同决定。常见现象：你写了 button:not(.primary) { color: red; }，但 .primary 按钮还是红的。原因通常是：.primary { color: red; } 单独存在，或有更高优先级的通用规则（比如 button { color: red; }）兜底生效，:not() 根本没机会介入。
:not() 里能写什么、不能写什么？
括号内只能是一个「简单选择器」，不是你能想到的所有写法。写错就整条 CSS 规则静默失效（DevTools 里直接划掉，不报错也不警告）。
- ✅ 合法：
:not(.disabled)、:not([type="hidden"])、:not(button)、:not(:hover) - ❌ 静默失效：
:not(.sidebar p)（含空格）、:not(div > button)（含组合器）、:not(.a.b.c)（多类连写在 Safari ≤15.4 中被忽略） - ⚠️ 兼容性分水岭：
:not(.a, .b)在 Chrome 110+ / Firefox 117+ / Safari iOS 17.4+ 才稳定支持；旧项目必须拆成:not(.a):not(.b)
多个排除条件怎么链式写才安全？
用连续 :not() 是最稳妥的写法，语义清晰、兼容性好、调试直观。例如要跳过 .ghost 和 .outline 两种按钮：
button:not(.ghost):not(.outline) { opacity: 0.9; }
注意：:not(.ghost):not(.outline) 表示“既不带 .ghost 又不带 .outline”，不是“排除其中任一”。如果元素同时有两者，照样被排除——这符合预期。别写成 :not(.ghost, .outline)，除非你确认目标环境全量支持 Level 4 语法。
想排除“某容器下的子组件”怎么办？
:not() 对父级无感知，它只看当前元素自身有没有匹配括号里的条件。所以 p:not(.sidebar p) 是非法语法，.sidebar p 本身也不是一个简单选择器。
真正可用的解法只有两个：
- 正向收窄作用域：
.content p { background: #f0f0f0; }（只给明确容器内的p设样式） - 反向覆盖重置：
p { background: #f0f0f0; } .sidebar p { background: transparent; }（靠层叠覆盖，最可控）
慎用 :not(.sidebar) p：它只检查 p 的**直接父元素**是不是 .sidebar，而实际 DOM 中 p 往往嵌套多层，极易漏匹配。
:not() 的优先级等于其内部选择器权重之和——比如 input:not([type="text"]) 的特异性是 (0,0,2,1)，可能意外压过你原本写的 input[type="text"] 规则。调试时别只盯“有没有命中”，要看 DevTools 的 computed styles 里哪条被 override。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
