: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 语句，它的设计初衷只是快速排除一类明确的匹配项。越想用它表达「否则」「或者」「除非」，就越容易掉进解析失效或优先级错乱的坑里。
