:where()重置样式的核心价值是实现真正零特异性（0-0-0）的样式重置，确保规则可被任意后续选择器安全覆盖，避免权重冲突。
什么是 :where() 重置样式的核心价值
它能写出真正零特异性（zero specificity）的重置规则，比 * {} 或 :is(*) 更干净——:where() 内部选择器无论多复杂，整个选择器的权重恒为 0。这意味着你可以在任何地方安全覆盖它，不会因权重冲突导致重置失效。
为什么不能用 :is() 或 * 替代
:is() 取的是内部选择器的最高权重，比如 :is(h1, .title, [data-heading]) 实际权重等同于 .title（0-1-0），会干扰后续自定义样式；而 * 虽然权重低，但仍有 0-0-0，且在某些浏览器中触发更慢的全树遍历。只有 :where() 明确保证“不管里面写啥，整个选择器就是 0-0-0”。
-
:where(h1, .title, [data-heading])→ 权重 0-0-0 -
:is(h1, .title, [data-heading])→ 权重 0-1-0（被 .title 拉高） -
*:not(:defined)等“伪零权”技巧 → 实际仍是 0-0-0，但语义不清、可读性差
一个实用的零权重基础重置片段
下面这段代码可直接放入 base.css 开头，它不会干扰任何后续组件样式：
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-weight: normal;
}
:where(ul, ol, dl, p, pre, blockquote, figure) {
margin: 0 0 1rem 0;
}
:where(button, input, select, textarea) {
margin: 0;
font: inherit;
}
:where(img, svg, video, canvas) {
vertical-align: middle;
}
注意：所有选择器都包裹在 :where() 中，哪怕只是单个元素（如 :where(h1)）——这是强制归零的必要写法；不加 :where() 的 h1 本身权重就是 0-1-0。
兼容性与实际部署注意事项
:where() 在 Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持；旧版需靠 PostCSS 插件（如 postcss-selector-not 配合 postcss-preset-env）降级，但要注意：降级后生成的 CSS 会失去零权重特性（变成 h1, h2, ...），所以建议只对现代环境启用，或明确接受降级后的权重回归。
- 检查构建工具是否已启用
stage: 3或更高语法支持 - 避免在
:where()内混用:hover等伪类——部分旧版降级器处理不稳定 - 不要指望
:where(.foo):hover还是零权：伪类会提升权重，应拆成:where(.foo):hover单独写（此时权重由:hover决定，不再是 0）
真正的难点不在写法，而在团队能否统一认知：零权重不是“随便写”，而是主动放弃控制权，把样式决定权完全交给后续选择器——这要求重置层和组件层有清晰边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
