单独写 :where() 完全没反应，因其权重恒为0-0-0，低于浏览器默认样式（0-0-1）和第三方高权重要求（如.ant-btn:focus为0-0-2），整条规则被层叠计算直接跳过，DevTools中不可见。
单独写 :where() 为什么完全没反应
因为 :where() 本身权重恒为 0-0-0，比一个普通 button 标签选择器（0-0-1）还低，更压不住第三方库的 .ant-btn:focus（0-0-2）或浏览器 UA 样式。它不是“降低权重”，而是构造一条零权重新规则——没外层提权，就是空气规则。
常见错误现象：:where(.el-input) { padding: 8px; } 写完刷新，DevTools 的 Computed 面板里根本看不到这条规则，不是语法错，是被层叠计算直接跳过了。
- ✅ 正确用法必须带外层命名空间：
.my-app :where(button, input)，权重来自.my-app（0-0-1） - ❌ 错误写法：
:where(.third-party-button)或:where(.my-app button)，整条规则权重仍是 0-0-0 - ⚠️ 注意：外层选择器不能是通用符（
*）或伪类（:root），否则无法提供有效权重
:where() 括号里能写什么、不能写什么
括号内支持元素名、布尔属性（如 [disabled]）、伪类（如 :hover），但所有内容一律归零；一旦混入类名、ID 或组合器，就等于主动放弃零权重意图。
比如 :where(div.class) 中的 .class 会让整条规则失效，浏览器静默丢弃——不是报错，是 DevTools 里根本找不到它。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全写法：
:where(button, [type="checkbox"], a:hover) - ✅ 合法但需谨慎：
:where([data-role="button"])（属性选择器在括号内也归零） - ❌ 绝对禁止：
:where(.btn, #header, div p)、:where(::placeholder)（伪元素不支持）、:where(:is(.a, .b))（嵌套无效） - ⚠️ Safari 15.0–15.3 有 bug：
:where(.a, .b, .c)可能漏掉最后一个，上线前必须实测或拆成单条
和 all: unset 搭配时最常踩的坑
:where(*) { all: unset; } 看似彻底，实际会切断继承链：文字变黑、字体丢失、<select></select> 没下拉箭头、<input type="range"> 滑块消失——无障碍和用户预期同时受损。
它不保留 inherit 关键字的自然行为，也不区分语义层级。真要重置，得手动补关键继承项。
- ✅ 更稳妥：
:where(h1, h2, h3) { all: unset; font-size: inherit; font-weight: bold; } - ✅ 表单控件建议只清基础盒模型：
:where(button, input, select, textarea) { margin: 0; padding: 0; border: none; } - ❌ 别用
all: unset覆盖 UA 强制样式（如 Chrome 的input[type="search"]::-webkit-search-decoration），:where()压根作用不到那里 - ⚠️
all: revert或revert-layer在某些场景下更安全，但兼容性略差（Firefox 97+ / Chrome 116+）
覆盖第三方样式时，:where() 实际怎么起效
它不解决“覆盖”问题，只解决“不抢权”问题。真正起效靠三件事：外层锚点、声明顺序、避开 !important。
比如 Ant Design 的 .ant-btn[disabled] 权重是 0-2-1，你写 .my-btn:where([disabled])，权重是 0-1-1（来自 .my-btn），只要这条规则出现在 Ant Design CSS 之后，就能生效。
- ✅ 正确锚点位置：
.ant-modal :where(button)（把控制权交给组件自身作用域） - ✅ Vue/React scoped style 中穿透：
.my-component :where(.ant-input) - ❌ 错误竞争方式：
:where(.ant-btn) { color: red; }—— 权重 0-0-0，连默认文本色都盖不住 - ⚠️ 第三方用了
!important？:where()无解，只能换方案（如 JS 动态 class、@layer优先级分层）
