:where() 是归零构造器而非降权工具，必须配合外层命名空间提供权重基底才能生效；括号内仅限零权安全项，禁用复合选择器与高权结构。
:where() 本身不构建组件库，它只控制特异性起点；真正可复用、无冲突的组件样式，必须靠外层命名空间锚定 + :where() 内部清权组合实现。
为什么直接写 :where(.btn) 会失效
这不是语法错误，而是权重逻辑失效。整条规则特异性为 0-0-0，连浏览器对 button 元素的 UA 样式（比如 Chrome 的 button::-moz-focus-inner）都覆盖不了。更常见的是：第三方库的 .ant-btn[disabled] 特异性是 0-2-1，你的 :where(.btn) 规则在层叠中天然排最末，DevTools 里能看到它，但“已禁用”灰掉。
关键点在于：:where() 不是“降权工具”，而是“归零构造器”——它不降低已有权重，它构造一条新规则，且这条规则自身没权。没权的规则，匹配再准也没用。
必须用外层容器类提供唯一权重基底
真正安全、可扩展的写法，是让业务或主题类名作为外层锚点，承担全部权重责任，:where() 括号内只做归零收口：
-
.ui-kit :where(button, [type="submit"], .btn)→ 权重来自.ui-kit（0-0-1），括号内全归零 -
.theme-dark :where(.btn, .card, .input)→ 暗色主题下统一接管，且不干扰其他主题 -
.my-page :where([data-role="button"])→ 避免类名，用布尔或无值属性更稳妥
⚠️ 危险写法：:where(.ui-kit .btn) 或 :where(.btn.primary) —— 复合选择器进括号，整条规则特异性破防，Safari 可能静默丢弃，且无法调试。
:where() 括号内只能放“零权安全项”
括号内不是什么都能塞。浏览器解析时，只要发现非法结构（如 ID、带值属性、伪元素），就可能跳过整条规则，且控制台不报错、DevTools 不显示。
✅ 安全项（无隐式权重）：button、input、[disabled]、[required]、a、h1
⚠️ 谨慎项：[data-role] 可以，但 [data-role="primary"] 在 Safari 15.2+ 有引号解析异常风险，建议改用布尔属性 [data-role~="primary"] 或拆成两个类
❌ 禁止项：#header、.btn-primary、:hover、::before、:is() 嵌套 —— 这些会让整条规则被丢弃
和 :is() 混用时最易忽略的陷阱
语法一样，效果相反：:is() 取括号内最高权重，:where() 全部归零。混用时最容易翻车的是逻辑误判：
- 写了
:where(.dark) :is(button, .btn)，结果白天也变色 —— 因为:where(.dark)虽然权重为 0，但它依然全局匹配，不构成条件分支 - 写了
:where(:is(.a, .b))—— 嵌套无效，第二层被忽略，等价于:where(.a, .b)，但 Safari 旧版可能直接丢弃整条
真正难的不是写对语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。组件库的复用性，最终卡在锚点层级的设计上，而不是括号里塞了多少个选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
