多个:not()连用时，浏览器将每个:not()视为独立原子选择器，并列判断而非嵌套过滤；:not()仅支持简单选择器，不支持后代等复合选择器；其优先级由内外选择器共同决定，且需注意dom动态性与框架scoped影响。
多个:not()连用时，浏览器按什么顺序解析？
不是从左到右逐层过滤，而是把整个 :not() 当作一个原子选择器来处理——它只否定“当前这一个”条件，不构成嵌套逻辑。
比如 a:not(.disabled):not([href^="javascript"]) 的意思是：选中所有 a 元素，只要它**不带 .disabled 类**，且**href 属性不以 javascript 开头**。两个 :not() 是并列关系，不是“先排除 disabled，再从剩下里排除 javascript 链接”。
- 错误理解：
:not(.a):not(.b)≠ “排除掉同时有 .a 和 .b 的元素”（它其实会保留同时有 .a 和 .b 的元素，只要不单独满足任一条件） - 真正排除的是：有
.a的、或有.b的——也就是:not(.a):not(.b)等价于:not(.a, .b)的视觉效果，但语法上不能写成那样（:not()不支持逗号分隔多选择器） - Chrome 100+ 和 Firefox 95+ 支持
:not(.a, .b)这种新语法，但 Safari 目前仍不支持，老写法更稳妥
:not() 里能写复合选择器吗？哪些能，哪些不能？
能写的有限：只允许简单选择器（single selectors），比如类名、属性、伪类（:hover 本身不行，但 :checked 可以），但不能写后代、子代、兄弟等关系选择器。
例如 div:not(.foo > p) 是非法的——.foo > p 是复合选择器，:not() 无法接受。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
input:not(:disabled)、button:not([type="submit"])、li:not(.active) - ❌ 非法：
ul:not(li:first-child)、div:not(.header .logo)、p:not(a[href]) - 想实现类似“排除某个上下文下的元素”，得换思路：用更具体的选择器正向匹配，或靠 JS 补位
和 :is() / :where() 混用时，优先级怎么算？
:not() 的优先级由它内部的选择器决定，不是固定值。比如 div:not(.foo) 的优先级 = div + .foo = 0,1,1；而 :not([data-id]) 就只有 0,1,0。
跟 :is() 或 :where() 组合时，容易误判谁“压得过谁”。关键记住：:is() 取内部最高优先级，:where() 始终为 0；而 :not() 自己的优先级是“外部选择器 + 内部选择器”的叠加。
-
button:is(.primary, .secondary):not(.disabled)→ 优先级 =button+.primary+.disabled= 0,2,1 -
button:where(.primary):not([disabled])→ 优先级 =button+[disabled]= 0,1,1（因为:where()不贡献权重） - 别指望用
:where()降权来“绕过”:not()的限制——它只影响优先级，不改变可写内容的合法性
为什么加了 :not() 样式却没生效？常见断点在哪
最常被忽略的不是语法，而是「选择器是否真的命中了目标元素」。尤其是当 DOM 结构动态变化、或用了 Shadow DOM、或 CSS 作用域被框架隔离时，:not() 很容易变成“看起来写了，实际没机会执行”。
- 检查 computed styles：在 DevTools 里看目标元素的最终样式，确认是不是被更高优先级规则覆盖了（
:not()本身不降低优先级） - 注意伪类时机：
:not(:hover)在 hover 时自然不匹配，但很多人误以为它能“主动取消 hover 效果”，其实不能——它只是不应用该规则 - Vue/Svelte 等框架的 scoped CSS 会自动加属性选择器（如
button[data-v-abc123]:not(.disabled)），此时:not()依然有效，但需确保属性选择器没被意外移除 - 如果用 JS 动态增删 class，记得 class 名必须完全一致——
:not(.active)对class="active "（尾部空格）或class="Active"（大小写）都无效
复杂逻辑下，:not() 的边界很硬：它只做布尔判断，不做状态推导。要表达“除了 A 和 B 以外的所有 C”，往往得拆成多个规则，或者让 JS 帮忙打标记。
