:not()在css3中仅支持单个简单选择器，含空格、组合器或复合选择器（如.parent .child）会导致整条规则被浏览器完全忽略；多条件排除需链式书写，且应优先考虑层叠与显式重置而非过度依赖:not()。
:not() 在 CSS3 中只能接受单个简单选择器，写错就会整条规则被浏览器忽略——不是“部分失效”，而是完全不生效。
为什么 :not(.parent .child) 会失效
因为括号里不能含空格、关系符或组合器。.parent .child 是后代选择器，属于「复合选择器」，不符合 CSS3 规范。浏览器遇到这种写法，直接丢弃整条 CSS 规则，DevTools 里都看不到它。
-
:not(.child)✅ 合法：排除自身带.child类的元素 -
:not([data-role="nav"])✅ 合法：属性选择器是简单选择器 -
:not(:first-child)✅ 合法：伪类也属于简单选择器 -
:not(.a.b)✅ 合法：多类名仍算一个简单选择器（注意没空格） -
:not(div p)❌ 非法：含空格，是后代组合器
:not() 多条件排除必须链式写
CSS3 不支持 :not(.a, .b) 这种逗号分隔的列表语法，那是 Level 4 的特性，老版本不认。想同时排除多个类，得靠连续套用：
input:not([type="hidden"]):not(:disabled):not(.ignore) { border: 1px solid #ccc; }
- 顺序不影响匹配逻辑，但建议把更具体、更少命中的条件放前面（比如先筛
[type]），提升可读性 - 每个
:not()独立计算权重，input:not(.a):not(.b)的特异性 =input+.a+.b，比单纯input高得多 - 别误以为加了
:not(.a)就能让.a元素“回退”到默认样式——它只是不匹配这条规则；如果还有.a { border: none; }，那最终还是没边框
想排除「某容器下的子元素」？换思路，别硬塞进 :not()
例如：给所有 p 加背景，但不要 .sidebar p。你不能写 p:not(.sidebar p)（非法），也不能靠 :not() 反推作用域。
- ✅ 推荐做法：正向限定 + 显式重置
p { background: #f0f0f0; }.sidebar p { background: transparent; } - ⚠️
:not(.sidebar) p看似可行，但实际选中的是「父级不是.sidebar的p」，前提是这些p确实挂在非.sidebar节点下——DOM 结构稍一变化就失效 - ❌ 别用
div:not(.sidebar > p)：含组合器，整条规则被忽略
最容易被忽略的兼容性坑
CSS3 的 :not() 虽然 IE9+ 都支持，但它的“括号内容”决定实际底线：
- Safari 13.1 之前不支持
:not(:is())或:not(:where())，混用会整条失效 -
input:not([type=hidden][disabled])在旧版 Safari 中会被忽略（多属性连写虽合法，但某些引擎解析异常） - 嵌套
:not(:not(.a))语法合法但无意义，还可能触发旧引擎 bug - 真正难的不是写法，而是判断：这个排除逻辑，该交给
:not()声明式表达，还是由层叠和显式规则来承担——后者更稳，前者更脆
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
