:where() 本身不构建组件库，只控制特异性起点；真正“无冲突”样式需外层命名空间锚定+内部:where()清权组合，单用:where()规则权重为0-0-0，连UA样式都覆盖不了。
:where() 本身不构建组件库，它只帮你控制特异性起点。真正能“无冲突”的组件样式，必须靠外层命名空间锚定 + :where() 内部清权组合实现——单用 :where() 写的规则权重是 0-0-0，连浏览器默认样式都盖不住。
为什么直接写 :where(.btn) 会失效
这不是语法错误，而是权重逻辑失效：:where(.btn) 整条规则特异性为 0-0-0，而第三方库里的 .ant-btn 是 0-0-1、甚至 .ant-btn[disabled] 是 0-2-1，你的零权规则在级联中天然排最末。更糟的是，它连 button 元素的 UA 样式（如 Chrome 对 input[type="search"] 的 ::-webkit-search-cancel-button）都干预不了。
- 现象：写了
:where(.my-btn) { color: red; }，但按钮颜色没变 - 原因：这条规则权重低于任何带 class 的现有样式，也低于多数 UA 默认样式
- 误区：以为
:where()是“降权工具”，其实它是“归零构造器”——你得先给它一个可落地的权重基底
:where() 必须搭配外层容器类才有效
真正安全的写法，是把业务/主题命名空间放在 :where() 外面，让它贡献唯一权重来源：
- ✅ 推荐：
.ui-kit :where(button, [type="submit"], .btn)→ 权重来自.ui-kit（0-0-1），内部全归零 - ✅ 可扩展：
.theme-dark :where(.btn, .card, .input)→ 暗色主题下统一接管，且不干扰其他主题 - ❌ 危险：
:where(.ui-kit .btn)或:where(.btn.primary)→ 复合选择器进括号，整条规则权重破防，Safari 可能静默丢弃 - ⚠️ 注意：外层类名不能是第三方类（如
.ant-design），否则你和它在同一权重层竞争，依然要拼 specificity
哪些选择器放进 :where() 括号里才安全
括号内只接受简单选择器，且不能引入任何隐式权重。浏览器解析时，只要发现非法结构（如 ID、复合 class、带值属性），就可能跳过整条规则。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全列表：
button、input、[disabled]、[required]、a、h1—— 元素名或布尔属性，无额外权重 - ⚠️ 谨慎使用：
[data-role]可以，但[data-role="primary"]在 Safari 15.2+ 有引号解析异常风险，建议避免 - ❌ 禁止放入：
#header、.btn-primary、:hover、::before、:is(...)—— 这些要么非法，要么让整条规则被丢弃 - ? 提示：用
:where(button, input, select)重置表单控件基础样式，比* { all: unset }更可控，不会破坏inherit链
与 :is() 混用时最易忽略的陷阱
:where() 不提供条件分支能力，它只放弃权重，不阻断匹配。常见翻车点是误把它当 JS 的 if 用：
- ❌ 错误写法：
:where(.dark) :is(button, .btn)→:where(.dark)权重为 0，但它仍匹配文档中任意位置的.dark；只要页面存在这个 class，整条规则就生效，白天也会触发 - ✅ 正确思路：用外层作用域约束，比如
.theme-dark :where(button, .btn)，把语义控制权交给 DOM 结构，而非伪类逻辑 - ⚠️ 关键区别：
:is()适合“多形态归一”（如:is(.card-header, .modal-title)），但权重按其中最高者算；:where()适合“基线归零”，两者定位不同，混用前先想清楚你要的是“统一匹配”还是“零权可覆盖”
真正难的不是写对 :where()，而是设计出不依赖特异性战争的组件边界——比如用 CSS 自定义属性暴露变体接口，用级联层隔离第三方样式，再用 :where() 清理底层元素默认行为。这些环节缺一不可，单独拎出 :where() 并不能解决组件冲突。
