:where() 生成零特异性规则，必须配合外层有权重的选择器（如 .my-app）才能生效；单独使用无效，且不解决第三方 !important 覆盖问题。
为什么单独写 :where(.ant-btn) 完全没效果
它算出来的特异性是 0-0-0，比一个普通 button 标签选择器（0-0-1）还低，连浏览器默认样式都盖不住。DevTools 的 Styles 面板里根本看不到这条规则——不是语法错，是被层叠计算直接跳过了。
常见错误现象：全局 CSS 里写了 :where(.el-button) { padding: 8px; }，刷新后毫无反应；或者用 :where(#header) 想匹配 ID，结果照样失效。
-
:where()不降低已有选择器的权重，而是构造一条全新、零权的规则 - 括号里塞 ID、嵌套类、伪类都没用，整条规则仍是
0-0-0 - 加
!important也没用：权重为 0 的声明加!important，仍会被任何非零权重规则覆盖
.my-app :where(.ant-btn) 才是真正生效的写法
起作用的是外层那个有实际权重的选择器：.my-app 贡献 0-0-1，:where() 只负责把括号内部分“归零”，整体才能进入层叠流程。
关键不是“怎么写 :where()”，而是“在哪一层提权”：
- 外层必须是业务可控的命名空间，比如
.my-page、[data-theme="dark"]，不能用泛泛的body或div - 只把第三方类名、属性或状态塞进
:where()，比如.my-theme :where(.ant-btn)[disabled]，而不是:where(.ant-btn[disabled]) - 如果第三方用了
!important，:where()依然无效——这时候得靠顺序 + 外层锚点 + 自定义属性兜底
和 :is() 混用时最容易翻车的三个点
:is() 取括号内最高权重，:where() 全部归零，二者语法一样但效果相反。混用不等于逻辑分支，只是权重调控工具。
- 别写
:where(.dark) :is(h1, h2)想做暗色模式判断——:where(.dark)权重为 0，但它只要页面里存在.dark就匹配成功，白天也会生效 - 别嵌套：
:where(:is(.a, .b))无效，第二层被忽略 - 多选项列表如
:where(.a, .b, .c)在 Safari 15.0–15.3 有解析 bug，可能漏掉最后一个，上线前必须实测
兼容性与兜底必须手动做
Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持，但旧版 Safari（如 15.2）对 :where() 解析不稳定，可能整条规则静默失效。
CSS.supports('selector(:where(a))') 返回 true，不代表渲染正确——它只检测语法支持，不保证行为一致。
- 构建时建议用 PostCSS 插件自动 fallback，比如把
.my-app :where(button)编译成.my-app button（牺牲零权，保功能） - 不要依赖
:where()做核心布局或可访问性样式，它本质是「降权开关」，不是「条件开关」 - 真正难的不是写对语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
