:not()仅支持单个简单选择器，不支持复合选择器（如后代、子元素等）；其优先级等于内部选择器权重之和；多条件排除需链式使用:not()，不可用逗号。
css:not() 里不能写复合选择器？
是的，:not() 的括号内只允许单个简单选择器（simple selector），比如 .cls、#id、[attr]、:hover。写成 :not(.parent .child) 或 :not(div p) 是无效语法，浏览器会直接忽略整条规则。
常见错误现象：button:not(.disabled .btn) 看起来想排除“父元素有 disabled 类的 btn 按钮”，但实际语法非法，样式照样作用在所有 button 上。
- ✅ 正确：
button:not(.disabled)（排除自身带.disabled的 button） - ✅ 正确：
input:not([type="hidden"])（排除 type=hidden 的 input） - ❌ 错误：
li:not(.nav > li)、div:not(.a.b)（后者虽是多个类，但.a.b属于一个简单选择器，其实合法；真正非法的是含空格或关系符的）
想排除「某类容器下的特定子元素」怎么办？
不能靠 :not() 直接写后代关系，得换思路：用更精确的作用域限定，或借助其他伪类组合。
例如，要给所有 p 加底色，但不给 .sidebar p 加——这不是 p “排除什么”，而是“只作用于非 sidebar 下的 p”。这时应正向限定范围：
立即学习“前端免费学习笔记（深入）”；
p { background: #f0f0f0; } .sidebar p { background: transparent; }或者用逻辑反推（更少依赖层叠）：
- 给
main p和article p单独设样式，避开.sidebar区域 - 用
:not(.sidebar) p—— 注意这是“不在 .sidebar 元素内部的 p”，但前提是这些p确实是:not(.sidebar)元素的后代（通常得确保它们的父级不是.sidebar） - 现代方案：css @layer 或 scope（实验性），但目前兼容性有限，不建议生产环境依赖
:not() 和优先级冲突时谁赢？
:not() 本身不提升优先级，它只是条件过滤。它的权重等于括号内那个简单选择器的权重。
比如：div:not(.special) { color: red; } 的优先级 = div（0,0,1,0） + .special（0,0,1,0） = 0,0,2,0；而 .special { color: blue; } 只有 0,0,1,0。所以即使元素同时匹配两者，:not() 规则仍会生效——因为优先级更高，而不是“排除”让它失效。
- ⚠️ 容易踩的坑：以为
button:not(.primary)会“让 .primary 按钮回退到默认样式”，其实它只是不匹配该规则；如果还有button { ... }或.primary { ... }，最终样式由层叠和优先级共同决定 - 调试建议：在 DevTools 中看 computed styles，确认哪条规则被应用、哪条被 override，而不是只看是否命中
:not()
用 :not() 排除多个类或属性时怎么写？
可以链式叠加 :not()，等价于逻辑“且”（AND）；但不能用逗号模拟“或”（OR）。
例如，要排除同时带 .disabled 和 .loading 的按钮？不行——:not() 只能判断单个条件。但可以写成：
button:not(.disabled):not(.loading) { cursor: pointer; }这表示“既不带 .disabled，也不带 .loading 的 button”才生效。
- ✅ 多个
:not()连用 = 所有条件都不满足 - ❌
button:not(.disabled, .loading)是非法语法（逗号分隔只用于选择器列表，:not()内不支持） - ? 替代方案：如果真要表达“排除 A 或 B”，可改用 class 命名策略，比如统一加
.unstyled类，再写button:not(.unstyled)
复杂点在于，:not() 看似简单，但它的能力边界和优先级行为常被低估。最稳妥的做法，往往是先明确“哪些元素**应该**有样式”，再用具体选择器去覆盖，而不是依赖 :not() 去兜底排除。