:where()本身不重置样式，仅归零特异性；必须搭配外层有权重的选择器（如类名）才能生效，否则连ua样式都覆盖不了。
:where() 本身不重置样式，它只归零特异性；真正生效的重置必须靠外层有实际权重的选择器兜底，否则规则连 UA 样式都压不住。
为什么单独写 :where(p, li) 没效果
这条规则特异性是 0-0-0，浏览器默认的 p 标签 UA 样式（比如 Chrome 给 p 的 margin-block: 1em）权重是 0-0-1，天然更高。DevTools 里能看到你的规则被划掉，但控制台不报错，也找不到原因——它只是被层叠逻辑默默丢在了最底下。
- 现象：写了
:where(p, li) { margin: 0; }，段落上下边距还在 - 原因：没外层锚点，整条规则权重为零，连
body p这种低权组合都赢不过 - 误区：以为“归零”等于“生效”，其实“归零”只是放弃争权，不等于获得落地权
安全有效的重置写法必须带外层容器类
外层类名提供唯一权重来源，:where() 内部负责清权、防冲突。这是唯一能兼顾“可覆盖”和“真生效”的组合。
- ✅ 推荐：
.reset-root :where(p, li, blockquote) { margin: 0; }→ 权重来自.reset-root（0-0-1），内部全归零 - ✅ 扩展用法：
.ui-reset :where(button, input, select) { all: unset; }→ 表单控件基础重置，不破坏 inherit 链 - ❌ 危险：
:where(.reset-root p)或:where(p.reset)→ 复合选择器进括号，整条规则权重破防，Safari 可能静默丢弃
哪些选择器放进 :where() 括号才不会失效
括号内只接受无隐式权重的简单选择器。一旦混入类名、ID、带值属性或伪元素，整条规则大概率被浏览器跳过，且无提示。
- ✅ 安全：
button、[disabled]、a、h1、:hover（布尔型伪类） - ⚠️ 谨慎：
[data-role]可以，但[data-role="primary"]在 Safari 15.2+ 有引号解析异常风险 - ❌ 禁止：
#header、.btn、::before、:not(:where(...))、:is()—— 均导致规则静默失效
和第三方组件库共存时的关键细节
想覆盖 Ant Design 或 Element Plus 的按钮样式，不能靠 :where(.ant-btn)，而要靠结构锚定 + 状态分离。
- ✅ 正确：
.my-app :where(button)[type="submit"] { padding: 8px 16px; }→ 外层.my-app提权，[type="submit"]是布尔属性，不加权 - ✅ 正确：
.theme-dark :where(.el-button) { color: var(--color-primary); }→ 前提是.theme-dark在 HTML 上，并确保你的 CSS 加载顺序在第三方之后 - ❌ 错误：
:where(.el-button.is-disabled)→ 复合 class 进括号，权重归零，但匹配不到真实节点（因真实 class 是el-button is-disabled，非单个 token）
真正难的不是写出语法正确的 :where()，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。多数人卡在第一步——忘了给 :where() 找个有分量的“东家”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
