:where()单独使用失效，因其权重恒为0-0-0，必须配合外层有实际权重的选择器（如.app-root :where(button)）才能生效，外层提供权重，内部归零。
直接写 :where(.class) 会失效，必须外层带权
单独用 :where(.btn) 的权重是 0-0-0，连浏览器默认样式都盖不住——它不是“降低已有权重”，而是构造一个新规则，且这个新规则本身没权。真正生效的写法必须靠外层选择器提权，比如 .app-root :where(button)，此时权重来自 .app-root（0-0-1），括号内部分才归零。常见错误是把第三方类名整个塞进 :where() 里，如 :where(.ant-btn-primary)，结果整条规则权重为 0，业务样式一加就覆盖掉，连调试都找不到源头。
:where() 里能放什么、不能放什么
括号内可安全使用元素名、类名、属性选择器（如 [disabled]）、伪类（如 :hover），但不能包含伪元素（::before）、:not() 嵌套 :is() 或 :where()、也不支持 :nth-child() 等需计算的选择器。一旦括号内出现非法项，整条规则会被浏览器静默丢弃，控制台不报错，DevTools 里也看不到这条规则。多选项列表（如 :where(.a, .b, .c)）在 Safari 15.0–15.3 有解析 bug，可能漏掉最后一个，上线前必须实测。
和 :is() 混用时权重怎么算
:is() 取括号内最高权重，:where() 全部归零，二者语法一样但效果相反。比如 .card :is(.title, #header) 权重是 0-1-1（因含 ID），而 .card :where(.title, #header) 权重是 0-0-1（仅 .card 贡献）。别写 :where(:is(.a, .b))——嵌套无效，第二层被忽略。想批量重置又保留容器上下文，优先用 :where()；想合并写法又需要一定权重兜底，才考虑 :is()。
为什么写了 :where() 还是覆盖不了第三方样式
三个最常见原因：
• 第三方用了 !important，:where() 无法穿透；
• 你的规则顺序错了——必须放在第三方 CSS 之后、业务样式之前，否则根本进不了层叠；
• 外层没选对锚点，比如用 body :where(.third-party-class)，权重虽有但太低，不如直接用组件自身 class 做前缀，如 .my-page :where(button)。真正难的不是写对语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。
立即学习“前端免费学习笔记（深入）”；
