:where()单独使用无效，因其权重恒为0-0-0，必须搭配外层带权选择器（如.my-app）才能生效；括号内仅可放元素名、布尔属性等无权项，类名、id或复合选择器会导致规则失效。
直接写 :where(.class) 不会降低权重，它会让整条规则权重归零（0-0-0），连浏览器默认样式都盖不住——你得靠外层选择器“借权”，否则它根本不起作用。
为什么 :where() 单独用会失效
这不是语法错误，是权重逻辑失效。:where(.btn) 的 specificity 是 0-0-0，而 button 元素的 UA 样式（如 Chrome 对 input[type="search"] 的 ::-webkit-search-cancel-button）通常有 0-0-1 或更高；第三方类如 .ant-btn 是 0-0-1，.ant-btn[disabled] 是 0-2-1。你的零权规则在层叠中天然排最末。
常见现象：:where(.my-btn) { color: red; } 写了但颜色没变，调试时在 DevTools 里甚至看不到这条规则生效——因为它被浏览器当作“无竞争资格”直接跳过了。
- 误区：以为
:where()是“降权工具”，其实它是“归零构造器” - 关键点：外层必须有一个带权选择器（如
.theme、.ui-root）作为锚点 - 危险操作：
:where(.ant-btn)或:where(#header)—— 括号内一出现类名或 ID，整条规则权重就破防，Safari 可能静默丢弃
正确写法：外层提权 + 内部归零
真正起效的模式只有一个：外层提供唯一权重来源，括号内只放无权项。权重来自外层，内部清零，才能既可控又可覆盖。
- ✅ 安全写法：
.my-app :where(button, [disabled], .btn)→ 权重 = 0-0-1（仅.my-app贡献） - ✅ 扩展写法：
.theme-dark :where(.card, .input, a)→ 主题切换不干扰其他上下文 - ❌ 错误写法：
:where(.my-app .btn)→ 复合选择器进括号，整条规则权重为 0，且 Safari 15.0–15.3 会漏掉最后一个选择器 - ⚠️ 高危写法：
:where(.btn.primary)或:where([data-role="primary"])—— 带值属性在 Safari 15.2+ 有引号解析异常，可能静默失效
:where() 括号里能放什么、不能放什么
括号内不是“随便写”，而是有严格解析边界。浏览器一旦发现非法结构，就跳过整条规则，控制台不报错，DevTools 也不显示——你只能靠实测排查。
- ✅ 安全项：
button、input、[disabled]、a、h1—— 纯元素名或布尔属性，无隐式权重 - ⚠️ 谨慎项：
[data-role]可以，但[data-role="primary"]建议避免；:hover在旧 Safari 中可能让整条规则失效 - ❌ 禁止项：
#header、.btn-primary、::before、:is()、:nth-child()—— 出现任一即整条规则被丢弃
和 :is() 混用时最容易翻车的地方
:where() 和 :is() 语法一样，行为相反。混用时不注意权重逻辑，反而会让样式更难调试。
-
.card :where(.title, #header)权重 = 0-0-1（仅.card） -
.card :is(.title, #header)权重 = 0-1-1（因#header是 0-1-0，加.card后升为 0-1-1） - ❌ 别写
:where(:is(.a, .b))—— 嵌套无效，第二层被忽略 - ⚠️ 注意：
:where(.dark) a会匹配页面任意位置的.dark，它不阻断匹配，只放弃权重；它不是 JS 的if，别指望它做条件分支
真正难的不是写对语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。上线前务必在 Safari 15.0–15.4、Chrome 105+、Firefox 103+ 实测多选项列表和属性值写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
