结论：用 :not(.类名) 即可，但括号内只能是单个简单选择器；:not(.ignore, .skip) 因语法错误被浏览器完全忽略；正确写法为 div:not(.ignore):not(.skip)。
直接说结论：用 :not(.类名) 就行，但必须确保括号里是「单个简单选择器」——不能带空格、不能嵌套、不能逗号分隔多个类。
为什么 :not(.ignore, .skip) 会失效
浏览器会直接忽略整条 CSS 规则，不是“部分不生效”，而是语法错误导致样式完全不加载。CSS 规范只允许 :not() 接收一个简单选择器，逗号在括号里是非法字符。
- ✅ 正确写法：
div:not(.ignore):not(.skip)—— 这表示“既不是 .ignore，也不是 .skip” - ❌ 错误写法：
div:not(.ignore, .skip)—— 浏览器报错或静默丢弃整条规则 - ⚠️ 注意：如果某个
div同时有.ignore和.skip，上面那条依然不会匹配它，这是符合预期的
:not() 能接受哪些选择器
只认「简单选择器」：类名、ID、标签、属性、单个伪类。任何含空格、>、+、~ 或多类连写的（如 .a.b）都需谨慎判断。
- ✅ 合法：
:not(.active)、:not([disabled])、:not(:hover)、:not(button) - ✅ 多类名连写也合法：
:not(.a.b)是一个简单选择器，等价于“排除同时拥有 a 和 b 类的元素” - ❌ 非法：
:not(.header .nav)（后代）、:not(.a, .b)（逗号）、:not(:not(.hidden))（嵌套） - ⚠️ 常见误判：
:not(div.active)看似合理，但含空格 → 实际是非法的后代选择器写法，会被忽略
排除多个类或属性时怎么组合
靠链式 :not() 拼接，逻辑是 AND（全都得不匹配），不是 OR。想表达“只要命中任一例外就不应用样式”，就得全列出来。
- 给所有非禁用、非只读、非隐藏的
input加边框：input:not(:disabled):not(:read-only):not([type="hidden"]) - 排除带
data-ignore属性或.skip类的列表项：li:not([data-ignore]):not(.skip) - 性能提示：链式越多，浏览器匹配开销略增；超过 3–4 层建议考虑改用更明确的 class 命名（比如统一加
.styled）
和 :nth-child() 混用时最易踩的坑
:not() 不影响计数顺序。它不是“先过滤再编号”，而是“先按 DOM 位置取第 N 个，再看它是否满足 :not() 条件”。
- 例如：
li:not(.ignore):nth-child(2n)匹配的是：DOM 中第 2、4、6… 个li，且这些li自身不能有.ignore - 如果第 2 个
li恰好是<li class="ignore">，那这一轮就什么也不匹配 - 真要实现“视觉上隔行变色”，别硬扛，优先用
:nth-of-type或 JS 动态加 class 控制
真正复杂的地方不在语法，而在于否定逻辑本身容易反直觉——你写的是“不想要什么”，但维护者看到的是“这个规则到底覆盖了哪些元素”。一旦页面结构或 class 命名变动，:not() 规则可能悄无声息地漏掉新加入的例外类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
