:where()内部选择器权重恒为0，仅清零不提权；适用重置、基类、工具类等需被轻松覆盖的场景，外层须保留有效权重来源，兼容性需注意Safari 15.0–15.3的多选项bug。
:where() 内部选择器权重恒为 0，它不提升、不降低、只清零——所以你不能靠它“赢过”别人，只能靠外层结构或声明顺序来覆盖。直接写 :where(.btn) 是无效的，权重 0-0-0，连浏览器默认样式都盖不过。
什么时候该用 :where() 而不是普通类名
你要重置、基类、工具类，且明确希望它们「被轻松覆盖」；比如清除表单控件默认边框、统一 pre 和 code 的背景、给第三方组件加兜底样式但不想硬拼权重。
- ✅ 正确场景：写基础重置规则（
:where(button, input, textarea)） - ✅ 正确场景：覆盖 Ant Design 按钮禁用态（
.my-theme :where(.ant-btn)[disabled]） - ❌ 错误场景：想靠
:where()单独提权覆盖高权重规则（它不提权） - ❌ 错误场景：把业务 class 塞进括号里（
:where(.my-btn)→ 权重归零，基础样式可能丢失）
:where() 怎么包才不丢权重又不抢权
外层保留有意义的权重来源（如容器 class、元素标签），内部只包你想“放弃争夺”的那部分——通常是第三方类名、属性、伪类状态。
-
.theme-dark :where(.ant-btn)→.theme-dark贡献 0-1-0，内部归零，整体仍是 0-1-0 -
nav :where([disabled])→nav贡献 0-0-1，[disabled]不加权，整体 0-0-1 -
.card :where(> *)→ 外层.card保权，子代通配归零，安全可控 - ⚠️ 避免：
:where(.ant-btn[disabled])→ 整条规则权重 0-0-0，基础样式可能直接失效
兼容性和常见失效点
:where() 在 Safari 15.0–15.3 存在解析 bug，多选择器列表（如 :where(.a, .b, .c)）可能漏掉最后一个；Chrome 105+、Firefox 103+、Safari 15.4+ 才稳定支持。
立即学习“前端免费学习笔记（深入）”；
- 上线前必须在目标 Safari 版本中实测多选项行为
- 若需兼容 Safari 15.3 及以下，拆成多个独立规则（
:where(.a) {} :where(.b) {}） -
:where()无法穿透 Shadow DOM 或 CSS-in-JS 作用域边界 - 它不处理伪元素（如
::-webkit-search-cancel-button），UA 样式仍可能压倒它
真正难的不是写对 :where()，而是判断哪一层该留权、哪一层该放权——外层没权，里面再清零也没用；外层权太高，又违背了“便于覆盖”的初衷。这个分寸感，得靠 DevTools 里反复看 Computed 的 specificity 数值来练出来。
