:where()不降低已有选择器优先级，只构造权重恒为(0,0,0,0)的新规则；单独写:where(.btn)失效因其权重低于浏览器默认样式(0,0,0,1)，必须搭配外层有权重的选择器（如.my-app）才能生效。
:where() 不降低已有选择器的优先级，它只构造一条权重恒为 (0,0,0,0) 的新规则；想让它真正生效，必须搭配一个有实际权重的外层选择器（比如 .my-app 或 article）。
为什么单独写 :where(.btn) 会失效
它不是“把 .btn 的权重从 (0,0,1,0) 降到更低”，而是新建一条权重为 (0,0,0,0) 的规则。这条规则连浏览器默认样式都盖不住——更别说覆盖第三方库中 .ant-btn[disabled] 这类 (0,0,2,0) 权重的样式了。
- 常见错误：把整个第三方类名塞进
:where()，例如:where(.ant-btn-primary)，结果整条规则变成空气，DevTools 里都看不到 - 调试线索：在 Elements 面板里看到该规则灰掉、不生效，且 computed 样式里完全没出现，大概率是外层没提权
- 真实权重对比：
button是 (0,0,0,1)，:where(.btn)也是 (0,0,0,0) —— 后者反而更低
:where() 正确包裹位置：只包“需要降权的部分”
关键原则：外层保留可控权重，内层用 :where() 消解嵌套带来的额外特异性。
- ✅ 正确：
.card :where(.title, .subtitle)——.card贡献 (0,0,1,0)，括号内归零，整体权重仍是 (0,0,1,0) - ❌ 错误：
:where(.card .title)—— 整条规则权重归零，匹配成功但毫无覆盖力 - ⚠️ 危险：
:where(a:hover)在 Safari 15.0–15.3 可能静默失效，hover 状态不触发 - 禁止嵌套：
:where(:where(.a))第二层无效，浏览器直接忽略
和 @layer reset 配合才真正可控
单靠 :where() 不够稳：如果它出现在样式表靠后位置，仍可能被前面高权规则压制。必须让它“先清场”。
- 必须写成：
@layer reset {<br> :where(h1, h2, h3) { margin: 0; }<br> :where(ul, ol) { padding-left: 0; }<br>} - 不能只靠顺序：
@layer reset确保这些规则优先执行，不受后续@layer component干扰 - 别用
@supports selector(:where(*))做兜底——老浏览器会跳过整条规则，得手动降级：h1, h2, h3 { margin: 0; }
哪些场景千万别滥用 :where()
它不是万能低权 wrapper，滥用反而让问题更难排查。
- 别写
:where(.grid) { display: grid; }—— 一旦业务代码漏写.grid，布局直接塌陷，且 DevTools 里权重为 0 的规则排序靠后，极难定位 -
:where(div)和div权重一样，都是 (0,0,0,1)，纯属多此一举 - 避开伪元素：
::placeholder、::-webkit-search-cancel-button不在:where()作用范围内 - 第三方用了
!important？:where()完全无效，别白费力气
真正难的不是语法写对，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。生产环境里，:where() 必须锚定在你可控的命名空间下，否则就是一句无法落地的 CSS 哲学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
