:where()不降低已有选择器权重，仅构造(0,0,0)新规则；单独使用如:where(.btn)因权重低于ua样式(0,0,1)而失效，必须配合外层选择器（如.my-theme）提权才生效。
:where() 不能降低已有选择器的优先级，它只是构造一条权重恒为 (0, 0, 0) 的新规则；真正“有效”的前提是：你没把它当降权工具用，而是当「归零锚点」来配合外层选择器提权。
为什么单独写 :where(.btn) 样式根本不起作用
浏览器解析时，:where() 括号内所有内容不参与特异性计算，整条规则权重就是 (0, 0, 0)。这意味着：
-
:where(.btn)的权重比div（(0, 0, 1)）还低，连 UA 默认样式都可能被它清掉 - 它匹配成功，但几乎必然被后续任意带 class 的规则覆盖，比如
.my-app .btn（(0, 2, 0)） - 如果第三方用了
!important，:where()完全无效
:where() 真正该包什么、不该包什么
关键不是“塞进去”，而是“留出权重锚点”。括号里只放你希望“不争权”的部分，外层必须保留一个可控、稳定的选择器：
- ✅ 正确：
.my-theme :where(button, [disabled])—— 权重来自.my-theme（(0, 1, 0)），内部归零但整体生效 - ✅ 正确：
article :where(h1, h2)—— 利用语义容器提权，避免和全局标题规则冲突 - ❌ 错误：
:where(.my-theme button)—— 整条规则权重(0, 0, 0)，等于空气 - ❌ 错误：
:where(#main) button—— ID 塞进:where()白费，权重还是(0, 0, 0)
哪些场景下 :where() 才算“真有用”
它不是万能覆盖器，而是「基线归零工具」，只在明确需要默认存在、又必须让业务层无压力接管时才启用：
- 清除表单控件默认外观：
:where(button, input, select, textarea)，只配元素或布尔属性（如[disabled]），不混类名 - 统一基础间距：
:where(a, ul, ol, p)，避免用all: unset破坏继承链 - 第三方组件穿透：
.third-party-component :where(button)，把控制权交给组件自身作用域，而非同级硬刚 - 配合
@layer reset做兜底：@layer reset { :where(h1, h2) { margin: 0; } }，确保优先执行
上线前最容易被忽略的兼容性坑
:where() 在 Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持，但旧版 Safari（如 15.2）对它的解析不稳定，可能整条规则静默失效——CSS.supports('selector(:where(a))') 返回 true，不代表渲染正确。
- 别依赖
@supports selector(:where(*))做兜底，老浏览器会直接跳过整条规则 - 必须手动 fallback：复制一份不含
:where()的等效规则，比如h1, h2 { margin: 0; } -
:where()不能嵌套，:where(:where(.a))第二层无效 - 避开伪元素（
::placeholder、::-webkit-search-cancel-button），它们不在:where()作用范围内
最常翻车的点，是把整个目标选择器包进去，以为“加了 :where() 就安全了”，结果整条规则变空气；真正起效的永远是“外层有锚、内层归零”这个组合动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
