:not()只能写一个简单选择器，写错则整条规则静默失效；它不取消样式，仅过滤匹配，最终样式由层叠和优先级共同决定。
直接说结论：:not() 只能写一个简单选择器，写错就整条规则失效；它不“取消样式”，只是“不匹配”，最终样式由层叠和优先级共同决定。
为什么 :not(.disabled) 有时不起作用
常见错误是以为加了 :not() 就能“跳过”某个元素，结果发现 .disabled 按钮还是被样式影响了。原因有三个：
- 语法非法：比如写成
button:not(.container .btn)—— 含空格的后代选择器在:not()里不被识别，浏览器直接丢弃整条 CSS 规则 - 优先级更低：如果同时存在
.disabled { color: red; }和button:not(.disabled) { color: blue; }，前者权重（0,0,1,0）低于后者（0,0,2,0），但若还有button { color: green; }（0,0,1,0），它可能覆盖不上:not()规则，导致视觉上“没排除” - 误解语义：
button:not(.disabled)只选中“自身不带 .disabled 类”的 button，不会影响父容器有.disabled的子 button —— 它不看祖先，只看自己
:not() 能写什么、不能写什么
括号里只能是「简单选择器」，不是“你能想到的所有选择器”。合法与非法对比：
- ✅ 合法：
:not(.active)、:not([type="hidden"])、:not(:hover)、:not(input[type="submit"])（属性选择器算简单选择器） - ❌ 非法：
:not(.sidebar p)、:not(div > button)、:not(.a.b.c)（注意：多个类如.a.b是合法的，它是单个简单选择器；真正非法的是含关系符或空格） - ⚠️ 兼容性坑：
:not(.a, .b)在 CSS Selectors Level 4 中支持（Chrome 110+、Firefox 117+），但 Safari 直到 iOS 17.4 才稳定支持；旧项目建议拆成:not(.a):not(.b)
想排除“某区域下的子元素”怎么办
这是 :not() 最常被误用的场景。例如：“给所有 p 加背景色，但 .sidebar p 不要”。不能写 p:not(.sidebar p)（语法错），正确解法只有两个：
- 正向限定范围：
.content p { background: #f0f0f0; }（把作用域收窄到明确容器） - 反向兜底重置：
p { background: #f0f0f0; } .sidebar p { background: transparent; }（靠层叠覆盖，最稳妥） - 慎用
:not(.sidebar) p：它匹配的是“父级不是 .sidebar 的 p”，但实际 DOM 中 p 往往嵌套多层，:not(.sidebar)只检查直接父元素，容易漏匹配
链式 :not() 和组合条件怎么写
多个排除条件必须链式书写，顺序不影响逻辑，但影响可读性：
- 要排除 type=hidden 且 disabled 的 input？不行 ——
:not([type="hidden"][disabled])是合法的（单个选择器），但它只排除同时满足两者的元素 - 要排除 type=hidden 或 disabled 的任意一种？写成：
input:not([type="hidden"]):not(:disabled) - 想排除 .error 或 .warning 的段落？现代写法：
p:not(.error):not(.warning)；Level 4 支持：p:not(.error, .warning)（注意逗号分隔，不是.error,.warning） - 别写
p:not(.error, .warning) span——:not()只作用于前面那个选择器（这里是p），不会传导到span
最易被忽略的点：:not() 本身不改变选择器权重，它的作用纯粹是过滤匹配元素；调试时一定要看 DevTools 的 Computed Styles，确认到底是没匹配上，还是被更高优先级规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
