:where()需配合外层锚点类才能生效，因其自身权重为0-0-0，无法覆盖UA样式；括号内仅支持无隐式权重的简单选择器，混入类名、ID等会导致规则静默失效。
:where() 本身不构成重置库，它只是归零权重的工具；真正的重置必须靠外层容器类提供唯一权重起点，否则规则连 UA 样式都压不住。
为什么单独写 :where(p, ul, blockquote) 没效果
这条规则特异性是 0-0-0，而 Chrome 给 p 的 margin-block: 1em 来自 UA 样式，权重是 0-0-1。DevTools 里能看到你的规则被划掉，但控制台不报错——它只是被层叠逻辑默默丢在最底。
常见现象包括：
-
:where(input[type="text"]) { padding: 8px; }→ 输入框依然没内边距 -
:where(.btn) { color: red; }→ 按钮颜色不变，因为 Ant Design 的.ant-btn权重至少是 0-1-0
安全有效的外层锚点怎么选
外层类名不是随便起的，它要满足三个条件：可预测、不冲突、有语义。不能用泛泛的 body 或 html，也不能用第三方库自带的 class（比如 .el-container）。
推荐方案：
-
.reset-root :where(p, ul, ol, blockquote, pre, h1, h2, h3) { margin: 0; }→.reset-root提供 0-1-0 权重，内部清权后整体可控 -
article :where(h1, h2, p, figure) { margin-block: 0.75em; }→ 利用 HTML 结构提权，避免全局污染 -
[data-theme="modern"] :where(button, input, select) { all: unset; }→ 用属性锚定，便于 JS 动态切换
:where() 括号里能放什么、不能放什么
括号内只接受「无隐式权重」的简单选择器。一旦混入类名、ID、带值属性或伪元素，整条规则大概率被浏览器静默丢弃，且 DevTools 不提示。
✅ 安全写法：
-
button、a、h1—— 纯标签 -
[disabled]、[required]—— 布尔型属性选择器 -
:hover、:focus—— 布尔型伪类（注意：不是::before这类伪元素）
❌ 危险写法：
-
.btn、#header—— 类名和 ID 会破权，Safari 可能直接跳过整条规则 -
[data-role="submit"]—— 引号在 Safari 15.2+ 有解析异常风险 -
:not(:where())、:is()、::placeholder—— 全部非法，整条规则失效
和第三方组件库共存时最关键的细节
想覆盖 Element Plus 的按钮样式，不能靠 :where(.el-button)，而要靠结构锚定 + 状态分离。
✅ 正确写法：
-
.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 加载顺序在 Element Plus 之后
⚠️ 容易被忽略的一点：加载顺序比语法更重要。:where() 规则必须放在第三方 CSS 之后、业务样式之前，否则层叠顺序让它彻底无效。真正难的不是写对括号，而是判断哪一层该留权、哪一层该放权——外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
