:not()只接受简单选择器，如单类名、单标签名、单属性选择器；复合选择器如:not(.a.b)或:not(div.foo)无效，整条规则被丢弃。
not伪类写法错误导致样式完全不生效
最常见的问题是把 :not() 当成万能过滤器，直接写 :not(.foo) 却忘了它只接受简单选择器——不能写复合选择器、不能带空格、不能嵌套。比如 :not(div.foo) 或 :not(.a .b) 都是无效语法，浏览器会整个规则丢弃，后面所有声明都不执行。
真正能用的只有：单个类名、单个属性选择器、单个标签名、单个伪类（如 :hover）。
-
:not(.header)✅ 合法 -
:not([data-id])✅ 合法 -
:not(button)✅ 合法 -
:not(.a.b)❌ 无效（多类名不算简单选择器） -
:not(div.active)❌ 无效（标签+类组合不被允许）
想排除多个类名，必须重复写:not()
如果目标是“除了有 .ignore 或 .skip 的元素，其它都加边框”，不能写成 :not(.ignore, .skip)——CSS 不支持逗号分隔的参数。必须拆成链式否定：:not(.ignore):not(.skip)。
这是因为 :not() 每次只否定一个条件，连续写等价于“既不匹配 A，也不匹配 B”，逻辑上是 AND 关系，不是 OR。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
div:not(.ignore):not(.skip) { border: 1px solid #ccc; } - ❌ 错误：
div:not(.ignore, .skip) { ... }（语法错误，整条规则失效） - ⚠️ 注意：如果某元素同时有
.ignore和.skip，上面那条依然不匹配——这反而是对的，符合预期
伪类嵌套陷阱：:not(:first-child) 不等于 :first-child 的反面
:not(:first-child) 看似是“非第一个子元素”，但它只排除那些**恰好是第一个子元素且满足前置选择器条件**的元素。比如 p:not(:first-child) 并不会选中所有非首个 p，而是选中“是 p 标签但父容器里它不是第一个子元素”的那些 p。
换言之，:not() 的否定范围仅限于它紧邻的前置选择器所描述的元素集合，不改变前置选择器本身的匹配逻辑。
- ❌ 错误理解：
li:not(:first-child)→ “除了第一个li其它都选” - ✅ 实际行为：
li元素中，排除掉那些在父元素里排第一的li——但如果第一个子元素是div，第二个才是li，这个li就会被选中 - ? 场景提醒：想统一处理列表项但跳过首项，更稳妥的是用
li:nth-child(n+2)
兼容性与性能：IE 完全不支持 :not() 复杂用法
IE8 只支持 :not() 里面写标签名，比如 :not(div)；IE9+ 才开始支持类名和属性选择器，但不支持 :not() 套伪类（如 :not(:hover)）。现代项目若需兼容旧 IE，得降级为 JS 控制或用额外 class 标记。
另外，虽然现代浏览器优化得不错，但过度嵌套 :not()（比如三层以上）仍可能触发重排计算开销，尤其在大量动态增删节点的场景下。
- ✅ 推荐：
button:not([disabled]):not(.loading) - ⚠️ 谨慎：
input:not([type="hidden"]):not(:disabled):not(.masked):not(.readonly)（可读性差，也难维护） - ? 替代思路：优先用正向 class 控制，比如统一加
form-control，再单独定义.form-control.disabled覆盖
:not() 能塞任意选择器进去，结果样式全没了还找不到原因。 
