:where()括号内选择器权重恒为0-0-0，因其不参与特异性计算；外层加类或id、括号内混入类名、配all:unset、覆盖伪元素均会导致重置失效；安全用法是纯元素/布尔属性组合或配合外层命名空间。

:where() 本身不“降低”已有选择器的优先级，它只构造一条权重恒为 0-0-0 的新规则——这才是它适合做低优先级重置的根本原因。

为什么:where()括号里的选择器权重一定是0-0-0

浏览器对 :where() 的实现是：括号内所有选择器（无论多复杂）都不参与 specificity 计算。写 :where(.btn.primary:hover)，权重不是通常的 0-2-1，而是硬性归零为 0-0-0。它只负责匹配元素，不抢覆盖权。

• 这和 :is() 完全不同：:is(.btn, #header) 权重直接取 #header 的 1-0-0
• :where() 不能嵌套：:where(:where(button)) 第二层无效，语法合法但无意义
• ID、属性选择器（如 [disabled]）、伪类（如 :hover）都能放进去，但一旦外层加 class（如 .reset :where(button)），整条规则权重就由 .reset 决定，:where() 只管括号内归零

哪些写法会让:where()重置“破功”

表面写了 :where()，实际权重失控，是最常见的调试盲区。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• ❌ 外层带 class 或 ID：.ui-kit :where(.button) —— 整条规则权重是 0-1-0，括号里归零没用，反而让规则更难被业务类覆盖
• ❌ 括号里混入类名：:where(.list-reset ul) —— .list-reset 是 class，权重立刻变成 0-1-1，:where() 归零失效
• ❌ 直接配 all: unset：:where(*) { all: unset; } 会切断继承链，color、font-family 全退到 UA 初始值，文字变黑、字体丢失、无障碍信号消失
• ❌ 试图覆盖伪元素：:where(input::placeholder) 语法错误，浏览器静默丢弃整条规则；::placeholder 必须单独写，且需更高特异性

真正安全有效的:where()重置写法

它不是万能覆盖器，而是“基线归零工具”——只在你明确希望样式存在、又必须让后续类无压力接管时才启用。

• ✅ 纯元素 + 布尔属性：:where(button, input, select, textarea, [disabled]) —— 权重稳在 0-0-0，且避开类名污染
• ✅ 配合外层命名空间提权：.my-app :where(a, ul, ol, p) —— 权重来自 .my-app（0-1-0），内部归零但整体可控
• ✅ 局部 scope 下穿透第三方类：在 Vue scoped style 中写 .article-content :where(.el-button)，不会因权重过高污染子组件
• ✅ 避开关键布局规则：别写 :where(.grid) { display: grid; } —— 权重为 0-0-0 的布局声明，在 DevTools 中排序靠后，漏写 class 时极难排查

容易被忽略的兼容性与作用域边界

上线前必须实测的几个点，比语法更重要：

• Safari 15.0–15.3 对多选项 :where(.a, .b, .c) 有解析 bug，可能漏掉最后一个选择器；建议拆成单条或加 @supports 守卫
• :where() 无法穿透 Shadow DOM、CSS-in-JS 动态生成的作用域，父组件写的规则对子组件 shadow root 内元素完全无效
• 它对 UA 样式（如 input[type="search"]::-webkit-search-decoration）和第三方 !important 规则完全无感——这不是缺陷，是设计使然

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！