:where()规则权重恒为0-0-0，必须依赖外层选择器提权才能生效；括号内仅支持安全语法，混用:is()会改变权重逻辑，需谨慎设计层级。
:where() 本身不重置已有选择器的特异性，它只构造一条权重恒为 0-0-0 的新规则。想让它真正生效，必须靠外层选择器“提权”，否则就是空气规则——连浏览器默认样式都盖不住。
为什么单独写 :where(.btn) 没反应
这不是语法错误，是权重归零后彻底失去竞争资格：:where(.btn) 权重 = 0-0-0，而 Chrome 对 button 的 UA 样式权重至少是 0-0-1（元素选择器），更别说第三方库里常见的 .ant-btn[disabled]（0-2-1）。浏览器按层叠顺序一比，直接跳过你的规则。
- 常见现象：加了
:where(.third-party-class) { color: red; }，但按钮颜色纹丝不动 - 根本原因：整条规则权重为
0-0-0，没资格参与层叠计算 - 验证方法：打开 DevTools → Elements 面板 → 找目标元素 → 看 Styles 面板里这条规则是否显示为灰色（被禁用）或干脆不出现
:where() 必须搭配外层命名空间才可用
真正有效的写法永远是「外层有权 + 内部归零」。外层提供可落地的权重起点，:where() 只负责把括号内那段“甩掉权重”，避免污染后续覆盖逻辑。
- ✅ 推荐：
.my-app :where(button, input, [disabled])→ 权重来自.my-app（0-0-1），内部清零，整体可控 - ✅ 安全：
article :where(h1, h2, h3)→ 利用语义容器提权，不依赖类名 - ❌ 危险：
body :where(.ant-btn)→body权重太低（0-0-1），仍敌不过.ant-btn-primary（0-0-2） - ⚠️ 警惕：
.third-party-component :where(button)→ 比直接写.third-party-component button更轻量，且保留作用域边界
括号里只能塞“安全项”，否则整条规则静默失效
:where() 对非法内容零容忍：一旦括号内出现不支持的语法，浏览器会直接丢弃整条规则，控制台不报错，DevTools 里也看不到它——这是最隐蔽的坑。
- ✅ 安全项：
button、[disabled]、:hover、.class（仅当确认该类名不带额外权重需求时）、input[type="text"] - ❌ 破功项：
::before（伪元素）、:not(.a)（嵌套伪类）、:is(.x)（嵌套函数）、.btn.primary（复合类名，触发权重回升） - ⚠️ Safari 15.0–15.3 的 bug：
:where(.a, .b, .c)可能漏掉最后一个选择器，上线前必须真机实测
和 :is() 混用时权重逻辑完全不同
别以为 :where() 和 :is() 是一对“兄弟”就能随意混搭。它们权重机制相反，混用时极易误判结果。
-
.card :is(.title, #header)→ 权重 =0-1-1（因含 ID） -
.card :where(.title, #header)→ 权重 =0-0-1（仅.card贡献） - ❌ 错误写法：
:where(:is(.a, .b))→ 外层:where()归零，但内层:is()被忽略，实际等价于:where(.a, .b)，白写了 - ? 实用组合：
.dark-theme :where(button, a) :is(:hover, :focus)→ 外层提权 + 中间清权 + 状态兜底，兼顾可维护与可控性
:where() 的语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。项目越复杂，越要提前规划好命名空间层级——比如用 .app-shell 而非 body 作锚点，用 [data-theme] 而非 .dark 做状态钩子。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
