:where()无法覆盖第三方样式因其特异性恒为0-0-0，需配合外层命名空间（如.my-app :where(button)）提权才能生效，仅适用于基线归零场景。
为什么单独写 :where() 无法覆盖第三方样式
因为 :where() 自身权重恒为 0-0-0，它不降低已有选择器的特异性，而是构造一个全新、零权重的选择器。你写 :where(.btn)，不是把第三方库中 .btn-primary:focus（权重 0-0-2）的权重“压下来”，而是另起一条毫无竞争力的规则。浏览器直接按权重碾压——0-0-0 永远输。
常见错误现象：:where(.third-party-component button) { margin: 0; } 完全无效，因为左侧已带命名空间的第三方规则权重更高；更糟的是，这条规则还主动放弃了控制权，把 :where() 套在了第三方选择器内部。
- 正确思路是：用外层容器“提权”，让
:where()生效有基础权重可依 - 错误做法：把
:where()当成“降权开关”往高权重选择器里塞 - 伪元素（如
::placeholder）不在:where()作用范围内，写了也白写
:where() 真正该用在哪几类重置场景
它只适合做「基线归零」：统一清除浏览器默认样式或抹平基础元素外观，且确保后续业务类名能无阻碍覆盖。典型安全用法是纯元素 + 布尔属性组合，不引入任何类名或 ID。
:where(button, input, select, textarea, a) { margin: 0; padding: 0; border: none; }-
:where([hidden], [disabled]) { display: none; }—— 布尔属性天然权重低，:where()不破防 -
:where(p, ul, ol, blockquote) { margin-block: 0; }—— 避免用all: unset，否则破坏inherit链导致字体/颜色丢失
别用它处理组件级样式（如 shadcn 或 headless-ui 渲染出的 [role="dialog"]），除非你同时加了外层锚点。
立即学习“前端免费学习笔记（深入）”；
和第三方库共存时，:where() 必须配合什么才生效
单靠 :where() 在复杂项目中就是空气规则。它需要一个“锚点”来获得可落地的权重起点，否则整个规则等于没写。
- 用外层命名空间提权：
.my-app :where(button, input)—— 此时权重来自.my-app（0-0-1），:where()内部保持零权重但整体生效 - 避开同级竞争：不要写
:where(.third-party-component button)，改用.third-party-component :where(button)，把控制权交给组件自身作用域 - 若第三方用了
!important，:where()依然无能为力，此时只能换策略（如 JS 动态移除 class 或用!important对抗）
容易被忽略的兼容性与语法坑
:where() 在 Safari 15.4+、Chrome 105+、Firefox 103+ 支持良好，但旧版 iOS 或老 Edge 会直接丢弃整条规则，且控制台可能只报模糊警告，不提示具体哪行失效。
- 检查括号是否闭合、逗号是否多余（如
:where(div, p, )末尾多逗号 → 整条规则失效） - 内部不能含非法选择器：
:where(:hover)、:where(.a::before)均不合法 - 不支持嵌套另一个
:where()或:is()，也不能用于@keyframes或@font-face - 容错机制只对无效选择器生效（如
:where(:valid, :unsupported)中后者被忽略），但语法错误仍会导致整条规则被丢弃
最常被跳过的一步：没用 @supports selector(:where(*)) 做特性检测就直接上线，结果在部分用户端样式大面积丢失。
