CSS伪类:not()多重嵌套逻辑下的样式优先级排查

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS伪类:not()多重嵌套逻辑下的样式优先级排查》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

:not()不支持嵌套，如:not(:not(.active))无效；仅支持单层且内部不能含:not()、:is()等；多:not()串联是“且”关系，非“或”；其内部选择器参与优先级计算，但本身不增权重。

伪类:not()嵌套时，浏览器根本没解析你的选择器

Chrome 100+、Firefox 95+ 虽支持 :not() 里写复合选择器（比如 :not(.a.b)），但**不支持多重嵌套**，例如 :not(:not(.active)) 或 :not(.foo:not(.bar)) —— 这类写法直接被当成无效选择器丢弃，连控制台警告都不会有。

常见错误现象：document.querySelector(':not(:not(.x))') 返回 null；开发者工具里该样式规则灰掉，像被注释了一样。

• 真正能用的只有「单层 :not() + 简单选择器」：如 :not(.disabled)、:not([data-loaded])、:not(div)
• :not() 内部**不允许出现另一个 :not()**，也不允许出现 :is()、:where() 等函数
• 想实现“排除 A 且排除 B”，得写成 :not(.a):not(.b)，而不是 :not(.a, .b)（后者语法非法）

多个:not()串联时，优先级不是叠加而是逐层过滤

写 button:not(.primary):not(.danger):hover，不是“先筛非 primary，再筛非 danger”，而是「同时满足三个条件」：是 button、没有 .primary 类、没有 .danger 类、处于 :hover 状态。它的权重和 button:hover 一样（都是 0-1-1），不会因为写了两个 :not() 就变高。

容易踩的坑：.list li:not(.first):not(.last) 看似想选中间项，但如果某 li 同时带了 .first 和 .last，它仍会被排除 —— 因为只要命中任一 :not() 条件就淘汰。

• 需要「排除组合类」时，必须写成单个 :not()，如 :not(.first.last)
• :not() 的参数本身是一个「完整的选择器」，所以 :not(.a.b) 匹配的是同时含两个类的元素，不是「含 .a 但不含 .b」
• 别指望用 :not() 实现逻辑“或”，它只做“且否定”

伪类嵌套导致 specificity 计算出人意料

:not(.foo) 的优先级是 0-1-0（一个 class），但 :not([disabled]) 是 0-1-0（一个属性），而 :not(div) 是 0-0-1（一个 type）。看起来一样，但实际在层叠中，它们和其他规则比谁赢，得按完整选择器算。

典型翻车场景：你写了 input:not([type="hidden"]) { display: block; }，结果被后面一句 input { display: inline; } 覆盖了 —— 因为后者虽然简单，但 specificity 是 0-0-1，而前者是 0-1-1（input + [disabled]），等等，不对：这里 :not([type="hidden"]) 是一个伪类，里面包了一个属性选择器，整个 :not() 块贡献 0-1-0，加上前面的 input，总 specificity 是 0-1-1，理应更高。那为什么输了？答案是：你写的其实是 input:not([type="hidden"])，但目标元素是 <input type="text"> —— 它确实不匹配 [type="hidden"]，所以规则生效；但如果页面里还有更早定义的 input[type="text"] 规则，它的 specificity 是 0-1-1，相同权重下，后定义者胜。

• :not() 本身不增加权重，它内部的选择器才计入 specificity
• :not(.a.b) 算作 2 个 class（0-2-0），:not(#id) 算作 1 个 id（1-0-0）
• 用浏览器开发者工具的「Computed」面板看最终生效样式时，注意检查「specificity」列数值，别只盯 CSS 文件顺序

想模拟复杂逻辑，别硬套 :not() 嵌套

比如要写「有 data-role 但不是 'menu' 且不是 'dialog' 的元素」，别折腾 [data-role]:not([data-role="menu"]):not([data-role="dialog"]) —— 可读性差，还容易漏掉空值或大小写问题。

更可靠的做法是换思路：

• 加一个中间 class：el.classList.toggle('excluded', role === 'menu' || role === 'dialog')，然后用 :not(.excluded)
• 用 :is() 配合 :not() 拆解（仅限现代浏览器）：:not(:is([data-role="menu"], [data-role="dialog"]))，这个合法，且语义清晰
• JavaScript 动态控制更稳妥：element.matches('[data-role]:not([data-role="menu"]):not([data-role="dialog"])') 可用于运行时判断，但别用来写样式逻辑

真正难的从来不是怎么写嵌套，而是意识到：CSS 选择器不是编程语言，:not() 不是 if 语句，它的设计初衷只是快速排除一类明确的匹配项。越想用它表达「否则」「或者」「除非」，就越容易掉进解析失效或优先级错乱的坑里。

终于介绍完啦！小伙伴们，这篇关于《CSS伪类:not()多重嵌套逻辑下的样式优先级排查》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！