:where()的作用是将括号内选择器权重归零，从而降低整体特异性，正确用法是仅包裹第三方类名、属性或伪类等需降权部分，外层容器类必须保留权重，且括号内只能用简单选择器。
为什么第三方组件样式总覆盖不掉
因为它的选择器权重太高，比如 .ant-btn[disabled] 是 0-2-1，你写 .my-theme .ant-btn[disabled] 反而变成 0-3-1，更难覆盖；而只写 .my-theme[disabled] 又根本匹配不到按钮——不是逻辑错，是权重卡死在中间。:where() 的作用不是“提权”，而是把某一段选择器的权重直接归零，让你能靠外层结构或声明顺序赢，而不是硬拼 specificity。
:where() 该包哪部分才能真正降权
只包「你想让它不争权」的那部分，通常是第三方类名、属性条件或伪类状态；外层容器、主题 class 或上下文选择器必须保留权重。
- ✅ 正确：
.my-theme :where(.ant-btn)[disabled]→ 外层.my-theme贡献 0-1-0，内部归零，整体仍是 0-1-0 - ✅ 正确：
.my-theme :where([disabled])→ 权重 = 0-1-0（来自.my-theme），[disabled]不加权 - ❌ 错误：
:where(.ant-btn[disabled])→ 整条规则权重 0-0-0，基础样式都可能丢 - ⚠️ 危险：
:where(#header)或:where(.btn.primary)—— ID 和复合 class 塞进去后虽能匹配，但权重为 0，大概率被其他普通 class 反向覆盖
哪些选择器放进 :where() 会破功
:where() 括号内只接受简单选择器列表，且必须保证不引入额外权重。一旦出现类名、ID 或复合选择器，就可能让整条规则失效或权重回升。
- ✅ 安全：
:where(button, input, [disabled], h1, h2)—— 元素、布尔属性选择器、纯标签 - ❌ 破功：
:where(.btn, div.class)—— 类名一出现，权重立刻失效 - ⚠️ 谨慎：
:where([data-role="primary"])—— 带值的属性选择器容易因空格或引号解析异常，尤其在 Safari 15.2 下静默失效 - ? 禁止：
:where(:hover)、:where(.a::before)、:where(:is(.x))—— 均非法，整条规则会被浏览器丢弃
和 :is() 混用时最常翻车的点
想给暗色模式下的所有按钮统一设色，写了 :where(.dark) :is(button, .btn)，结果白天也变色了。问题不在语法，而在逻辑：:where(.dark) 权重为 0，但它依然匹配文档中任意位置的 .dark，只要页面里有这个 class，整条规则就生效；它不提供条件分支能力，只是清权。
-
:where()不等于 JS 的if，它不阻断匹配，只放弃权重 -
:is()适合「多形态归一」，比如:is(.card-header, .modal-title)，但权重按其中最高者算（如有#id就变 0-1-0） - 要同时兼顾低权 + 多态，得组合：外层用主题 class 提供权重，内层用
:where()放第三方标识
:where() 解析不稳定，可能整条规则静默失效；而 CSS.supports('selector(:where(a))') 检测返回 true，但渲染已出错。别只靠支持检测兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
