:where()本身不重置优先级，只构造0-0-0权重规则；必须搭配外层容器（如.my-app或article）提权才生效，否则会被默认样式或第三方库覆盖。
:where() 本身不重置优先级，它只构造零权重规则；真正起作用的是“外层容器 + :where()”组合，否则你写的重置样式大概率被浏览器默认样式或第三方库盖掉。
为什么单独写 :where(button, input) 会失效
因为整条规则的特异性是 0-0-0，连原生 button 标签选择器（0-0-1）都赢不过。常见现象包括：
-
:where(input[type="text"]) { padding: 8px; }—— 输入框依然没内边距，因为 UA 样式里input的基础规则权重更高 -
:where(.btn) { color: red; }—— 按钮颜色不变，Ant Design 或 Bootstrap 自带的.btn权重至少是 0-1-0 - DevTools 里能看到这条规则，但“已禁用”图标灰掉，说明它被层叠覆盖了，不是没加载
:where() 在重置场景中该包什么、不该包什么
括号内只放“你不希望它争权”的部分，且必须是简单选择器；一旦引入类名或 ID，就等于主动放弃控制权。
- ✅ 安全写法：
:where(button, input, textarea, [disabled], h1, h2)—— 元素名、布尔属性，零风险 - ❌ 危险写法：
:where(.form-control, #search-input)—— 类名和 ID 塞进去后权重归零，但匹配目标也变弱，极易漏选 - ⚠️ 谨慎写法：
:where([data-role="submit"])—— Safari 15.2 下可能因引号解析异常静默失效 - ? 禁止写法：
:where(::placeholder)或:where(:hover)—— 伪元素和伪类不被支持，整条规则被丢弃
和第三方库共存时，:where() 必须搭配什么才有效
单靠 :where() 是空气规则，它需要一个“锚点”来获得可落地的权重起点。
- ✅ 正确模式：
.my-app :where(button, input)——.my-app贡献 0-1-0，内部归零，整体生效且后续可被.my-app .custom-btn覆盖 - ✅ 更安全的语义锚点：
article :where(h1, h2)或main :where(p, ul, ol)—— 利用 HTML 结构提权，避免全局污染 - ❌ 错误模式：
:where(.ant-btn) { ... }或body :where(.third-party-class)—— 前者权重为 0，后者权重虽有但太泛，容易被更具体的子选择器反向压制 - ⚠️ 注意顺序：
:where()规则必须放在第三方 CSS 之后、业务样式之前，否则层叠顺序直接让它无效
真正难的不是语法对不对，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。Safari 15.0–15.3 对多选项列表（如 :where(.a, .b, .c)）有真实解析 bug，上线前务必实测，别只看 @supports 返回 true 就放心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
