:where() 不会覆盖 .btn 样式因其选择器权重恒为 0，不参与层叠计算，专为安全重置默认样式设计，适用于 reset/base.css 场景，但无法对抗 !important。
为什么 :where() 不会覆盖你写好的 .btn 样式？
因为 :where() 生成的 CSS 选择器权重恒为 0 —— 它压根不参与层叠计算。哪怕你写成 :where(.btn:hover)，它的优先级也和 * {} 一样低，永远输给 .btn、div.btn 甚至 [class~="btn"]。
这特性不是“bug”，是设计使然：它专为「安全地批量重置默认样式」而生，比如清空所有 <ul></ul> 的 margin 又不想干扰业务类名。
- 常见错误现象：
:where(.header) { color: red; }写完发现没生效，其实是被后面一个.header { color: blue; }覆盖了，但你误以为是语法错了 - 使用场景：基础样式库（如 reset / base.css）中统一处理元素默认边距、列表符号、焦点轮廓等，避免污染业务选择器权重
- 参数差异：括号里支持任意复杂选择器，包括组合器（
, + > ~）、伪类（:hover）、属性选择器（[data-foo]），但全部归零
:where() 和 :is() 到底该选谁？
看你要不要“保留原有权重”。:is() 会取括号内所有选择器的最高权重，而 :where() 直接清零。两者语法几乎一样，但行为截然相反。
- 如果你在写组件库的通用重置规则（例如统一移除所有表单控件的
outline），用:where()更安全，不会意外提升权重干扰下游 - 如果你要给一组不同标签赋予相同交互样式（比如
:is(button, [role="button"]) { cursor: pointer; }），且希望这条规则能正常参与层叠，则选:is() - 性能影响：现代浏览器对二者优化已接近，但老版本 safari（≤15.4）不支持
:where()，需按需加:is()回退
在 postcss 或 Tailwind 中怎么用 :where() 避免样式泄漏？
Tailwind 默认不生成 :where()，但你可以手动包裹；PostCSS 插件（如 postcss-preset-env）能帮你转译，不过要注意输出目标。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：Tailwind 的
prose类在富文本里把按钮样式带歪了，因为.prose button权重高于业务写的.btn - 实操建议：在自定义 reset 规则里主动用
:where()包一层，例如:where(.prose) :where(button) { outline: none; }，确保它永远不抢权重 - 兼容性注意：若项目需支持 chrome 98 前或 firefox 96 前版本，得用 Autoprefixer 配合
supports查询做降级，不能直接依赖原生:where()
为什么你写了 :where() 却还是被 !important 干掉了？
因为 :where() 归零的是选择器权重，不是声明本身。一旦遇到 !important，它照样得让路——这点和 * 选择器一致。
- 容易被忽略的地方：很多人以为“零权重 = 最低优先级”，其实
!important是另一套机制，权重归零后依然要和别的!important规则比来源（author vs user vs UA）和顺序 - 真实风险点：某些 ui 库（如早期 Ant Design）在组件内联样式里塞
!important，此时哪怕你用:where()也无法覆盖，必须换策略（如更高 specificity 的类名、CSS-in-js 注入时机调整） - 调试技巧：在 DevTools 里看样式栏，如果某条
:where()规则被划掉，先别急着改选择器，点开它旁边的“computed”面板，确认是不是被!important或 inline style 截胡了
零权重不是万能钥匙，它是把双刃剑：换来的是可控的层叠秩序，代价是彻底放弃靠选择器“赢”过别人的能力。用之前，先想清楚你到底是要“清场”，还是“入场”。