:not()在CSS3中仅支持单个简单选择器，逗号分隔的多个选择器如:not(.a,.b)会被浏览器静默丢弃；正确写法是链式叠加:not(.a):not(.b)，逻辑为“且”；复杂排除可用:is()或:where()配合:not()实现。
:not() 在 CSS3 中**不能直接用逗号分隔多个选择器**，比如 div:not(.a, .b) 或 li:not(:first-child, :last-child) 会整条规则被浏览器静默丢弃——DevTools 里直接划掉，不报错也不生效。
为什么 :not(.a, .b) 会失效？
CSS3 规范强制要求 :not() 的参数只能是「单个简单选择器」。逗号在选择器语法中表示「并集」，属于复合结构，违反该限制。所有主流浏览器（Chrome 100+、Firefox 95+、Safari 16+）都严格遵循，不会尝试解析或降级处理。
- ✅ 合法：
:not(.a)、:not([data-id])、:not(:disabled) - ❌ 非法：
:not(.a, .b)、:not(.a .b)、:not(:not(.a)) - ⚠️ 注意：
:not(.a.b)（多类连写）在 CSS Level 4 中合法，但 Safari ≤15.4 仍静默忽略，生产环境慎用
正确写法：链式叠加 :not()
要实现“排除 .a 且排除 .b”，必须写成 div:not(.a):not(.b)。这是逻辑“与”（AND），不是“或”（OR）——元素必须同时不匹配两个条件才被选中。
- 如果某个
div同时有.a和.b，它会被排除（因为:not(.a)不成立） - 如果只含
.a，也会被排除（:not(.a)失败，整条链中断） - 顺序无关：
:not(.b):not(.a)效果完全相同 - 示例：给所有非禁用、非隐藏的 input 加边框：
input:not(:disabled):not([type="hidden"])
配合 :is() 简化复杂排除逻辑
当需要排除多种标签或嵌套条件时，纯链式 :not() 易出错且难读。可用 :is() 将主体归一化，再在外层否定：
- 目标：选中所有标题（
h1–h6），但排除h1和h2 - ❌ 错误：
h1, h2, h3, h4, h5, h6:not(h1):not(h2)——h1和h2仍会被前面的选择器命中 - ✅ 正确：
:is(h1, h2, h3, h4, h5, h6):not(:is(h1, h2)) - 注意：
:is()会降低特异性（权重归零），若需保持优先级，改用:where()或显式写出所有目标标签
最常被忽略的一点是：:not() 是选择器过滤器，不是样式开关——它选不中，就彻底没机会应用后续声明；调试时第一反应不该是“为什么样式没变”，而是打开 DevTools 看那条规则是否已被划掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
