:where() 生成零权重规则，需配合外层有实际权重的选择器（如 .ui-kit 或 article）才能生效，单独使用会导致样式失效。
它不提供“更易覆盖”的默认样式，而是帮你把默认样式的权重控制权交还给业务层——前提是外层必须有可靠锚点。
为什么单独写 :where(.btn) 会让组件库样式彻底失效
浏览器给 :where(.btn) 算出的 specificity 是 (0, 0, 0)，比一个原生 button 标签（(0, 0, 1)）还低，更别说第三方组件常用的 .ant-btn[disabled]（(0, 0, 2)）。它不是没匹配，是压根进不了层叠计算队列。
常见现象：在全局 reset.css 里写了 :where(.el-button) { padding: 8px; }，DevTools 的 Computed 面板里根本看不到这条规则生效痕迹。
- 它不降低已有类名权重，只构造一条全新、零权的新规则
- 括号内塞 ID（如
:where(#nav)）或组合器（如:where(.a .b)）会导致整条规则被静默丢弃 - 加
!important也无效——权重为 0 的声明再加!important，仍会被任意非零权重规则覆盖
:where() 必须和外层命名空间配对使用才真正可控
真正起作用的是外层那个有实际权重的选择器：.my-app、.theme-light 或语义容器如 article。它们提供权重起点，:where() 只负责把括号内部分“归零”，避免污染整体权重。
✅ 安全写法示例：
.ui-kit :where(button, input, [role="button"]) {
margin: 0;
padding: 0;
}
article :where(h1, h2, h3) {
margin: 0;
}
- 权重来自
.ui-kit（(0, 0, 1)），内部归零但整体有效 - 用语义容器（如
article）比用body更稳——避免和全局标题规则冲突 - 别写
:where(.ui-kit button)——整条规则权重归零，等于没写
哪些地方千万别用 :where() 做基础样式
它不是万能低权 wrapper。在关键布局规则里滥用，反而埋雷：
-
:where(.grid) { display: grid; }—— 一旦业务漏写.grid，布局直接塌陷，且 DevTools 里权重为 0 的规则排序靠后，极难排查 -
:where(a:hover)在旧 Safari（如 15.2）可能静默失效，hover 状态不触发 -
:where(div)和div权重一样，都是 (0, 0, 0, 1)，纯属冗余 - 伪元素（如
::placeholder）、嵌套:not()或:is()不支持，写了就整条规则消失
上线前最容易被忽略的三件事
语法对了，不代表线上能跑通。旧版 Safari 和构建工具常默默搞破坏：
- CSS 压缩插件（如 cssnano）可能误删
:where()，确认配置中discardUnused: false或显式保留该伪类 -
CSS.supports('selector(:where(a))')返回true不代表渲染正常——Safari 15.2 可能静默失败，必须在真实设备上验证 - Shadow DOM 和 CSS-in-JS 作用域内，
:where()无法穿透边界，局部重置只在当前 scope 生效
真正难的不是写对语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
