:where()权重恒为0-0-0，不参与计算，仅作条件过滤；括号内含权选择器会导致Safari静默丢弃或层叠失效；不可单独使用，须搭配外部有权选择器；非降权而是归零，!important无效；与:is()权重逻辑相反。
为什么:where()的权重恒为0-0-0
它不是“降低”优先级，而是从设计上就**不参与权重计算**。浏览器解析:where()时，直接忽略括号内所有选择器的权重贡献，整条规则的 specificity 完全由外部选择器决定——括号内只是匹配逻辑的“条件过滤器”，不加权。
:where()括号里写类名或ID会怎样
只要括号内出现.class、#id、:hover、:nth-child()等任何带权项，整条规则在 Safari 15.0–15.3 中大概率被静默丢弃；Chrome 虽可能保留，但 specificity 显示为 0-0-0，实际层叠中排在最末，连原生 button 的 UA 样式（0-0-1）都覆盖不了。
- ✅ 安全写法：
[disabled]、button、a、h2 - ⚠️ 风险写法：
[data-role="primary"]（Safari 15.2+ 引号解析异常） - ❌ 禁止写法：
.btn、#header、::before、:is()
为什么:where()不能单独用
单独写 :where(button) { color: red; } 等于没写——它的 specificity 是 0-0-0，而浏览器默认样式（如 button 的 UA 规则）至少是 0-0-1，这条规则在层叠中根本不会进入竞争队列。DevTools 的 Styles 面板里甚至看不到它生效，控制台也不报错。
- 必须搭配一个带权外层选择器，比如
.ui-root :where(button)，权重才来自.ui-root（0-0-1） -
:where()不是“降权工具”，是“归零构造器”：它只清空自己括号内的权重，不抵消外部 - 误以为加了
!important就能救回来？不行。权重为 0 的声明，加!important仍会被任何非零权重规则覆盖
和:is()混用时最容易忽略的一点
把 :is() 当成更安全的替代品，结果反而翻车。比如 :is(.btn, #header) 权重是 1-0-0（取最高），而 :where(.btn, #header) 是 0-0-0 —— 表面语法一样，行为却相反。你在设计系统基底层用 :where() 做重置，但同事在另一个文件里写了 :is(.btn) 加交互态，那交互样式就会意外压过你的重置。
真正需要警惕的，不是语法写错，而是没意识到：同一个选择器结构，在不同伪类下，权重可能从 0 直接跳到 100（按十进制权重理解）。这种断层式差异，调试时靠 DevTools 的 specificity 显示值才能一眼识破。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
