:not()支持链式组合但不可嵌套，如div:not(.a):not(.b):not([data-ignored])表示同时排除三类条件，逻辑为“且”；a:not(.nav-link):not(.footer-link)正确，a:not(.nav-link, .footer-link)错误。
多个 :not() 可以链式组合，但不能嵌套
可以，:not() 支持连续写多个，比如 div:not(.a):not(.b):not([data-ignored])，表示「既不是 .a、也不是 .b、也没有 data-ignored 属性」的 div。浏览器会逐个判断，逻辑是「且」关系。
- ✅ 正确：
a:not(.nav-link):not(.footer-link)—— 排除两类链接 - ❌ 错误：
a:not(.nav-link, .footer-link)—— 旧版浏览器（Chrome - ❌ 危险：
:not(:not(.active))—— 嵌套否定无效，所有主流浏览器直接忽略整条规则 - ⚠️ 注意：链式越多，可读性越差；三个以上
:not()建议改用 JS 动态加类控制
:not() 能否和伪类、属性选择器一起用？
可以，而且这是最常用也最安全的组合方式。:not() 括号内允许的「简单选择器」包括类名、ID、属性、伪类（如 :hover、:disabled、:first-child），但不支持伪元素（::before）、后代选择器（.a .b）或类型+伪类连写（input:checked）。
- ✅ 合法：
button:not(:disabled)、a:not([href^="https://"])、li:not(:nth-child(3n)) - ❌ 非法：
input:not(input:checked)（类型+伪类 = 复合选择器） - ❌ 非法：
p:not(.sidebar p)（含空格 = 后代选择器） - ? 小技巧：伪类优先放
:not()里面，比如用:not(:hover)而非:hover:not(...)，兼容性和语义更稳
组合使用时的优先级和覆盖逻辑
:not() 的权重与其括号内选择器完全一致，它不额外增加特异性。这意味着如果一条规则命中了某个元素，另一条带 :not() 的规则即使更“精确”，也可能被更高权重的规则覆盖。
- 例如：
.btn.active { color: red; }和.btn:not(.active) { color: blue; }同时存在时，.btn.active元素仍显示红色 —— 因为.active类的权重和:not(.active)相同，但前者声明在后（或权重略高） - ⚠️ 常见误解：以为
:not()是“强制排除”，其实它只是“不匹配”，样式是否生效，仍取决于层叠顺序和特异性 - ? 调试建议：用浏览器 DevTools 查看「Computed」面板，确认哪条规则最终生效，而不是只看「Styles」里有没有打钩
什么时候该放弃组合 :not()，换别的方案？
当你要排除的条件涉及结构关系（比如「除了被 .ad-banner 包裹的」）、兄弟状态（比如「前面不是 .title 的 p」）或动态状态组合（比如「未聚焦且已填写且非必填」）时，:not() 就力不从心了。
立即学习“前端免费学习笔记（深入）”；
- ? 不要硬凑：
p:not(.ad-banner p)语法错误，浏览器直接丢弃整条规则 - ✅ 替代做法一（推荐）：用上下文限定 + 覆盖，比如先写
.article p { margin-top: 1em; }，再写.ad-banner p { margin-top: 0; } - ✅ 替代做法二：用数据属性标记例外，HTML 加
data-no-margin，CSS 写p:not([data-no-margin]) - ✅ 替代做法三：复杂逻辑交给 JS，比如
el.classList.toggle('excluded', shouldSkip)，再用纯类名控制样式
真正容易被忽略的是：不是所有“排除”都适合用 :not() 实现；它的强项是单层、静态、自身特征的否定，一旦牵扯到父子、兄弟、多状态耦合，就该及时切换思路。
