:not()失效主因是括号内含非法内容导致整条规则被浏览器静默丢弃，如逗号分隔、空格、组合器、伪元素等；safari≤15.4还忽略多类连写；多条件排除需链式书写，无法用“或”逻辑；它仅作用于当前元素自身，不支持父子穿透；复杂排除应优先用显式重置而非:not()。
为什么:not()有时完全没效果
不是逻辑写错，是整条CSS规则被浏览器静默丢弃——:not()括号里只要出现非法内容，DevTools 里那行样式会被直接划掉，显示“Invalid CSS”。常见非法写法包括：:not(.a, .b)（逗号分隔）、:not(div .child)（含空格）、:not(.parent > .child)（含组合器）、:not(::before)（伪元素）。Safari ≤15.4 还会静默忽略:not(.a.b)（多类连写），尽管它在 Level 4 中合法。
:not()多条件排除必须链式写，不能靠“或”逻辑
:not(.skip):not(.ignore)意思是“既不带.skip，也不带.ignore”，不是“排除任一满足的”。如果一个元素同时有两者，照样被排除；如果只带其中一个，也会被排除。想表达“排除.skip或.ignore”，只能靠这个链式写法，别幻想:not(.skip, .ignore)——Chrome/Firefox/Safari 当前均未启用 Level 4 多参数语法，写了就失效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
别用:not()处理“某容器下的子元素”这类需求
:not()只作用于当前匹配的元素自身，无法向上查父级、也无法向下穿透子树。比如想跳过.sidebar里的所有p，p:not(.sidebar p)语法错误，:not(.sidebar) p又依赖父级恰好不是.sidebar——实际常不成立。可行做法只有两种：main p { … }（正向限定作用域），或p { … }; .sidebar p { background: transparent; }（层叠覆盖）。
复杂排除逻辑优先用显式重置，而非硬凑:not()
当要排除“同时有 A 和 B”的元素，或涉及动态状态（如 JS 设置el.disabled = true后样式不更新），:not()容错率低。更稳的做法是：主规则设默认样式，再单独写例外规则，例如button { background: #007bff; } + button.disabled, button[disabled] { background: #ccc; }。这样语义清晰、兼容性好（IE9+）、DevTools 调试直观——真正难的不是怎么写:not()，而是判断该不该用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
