:where()仅使括号内选择器权重为0-0-0，外层加class等会提升整条规则权重；无法覆盖UA样式、Shadow DOM、伪元素；all: unset会破坏继承与无障碍；它补权重干扰，不替代normalize.css。
:where() 能让括号内选择器权重强制为 0-0-0，是目前唯一能真正“不抢权”的重置手段；但它不是万能解药，用错位置或搭配不当，反而会让样式更难调试。
为什么:where()括号里写.class就破功了
权重归零只作用于 :where() 括号内的部分。一旦外层加了 class、ID 或属性选择器，整条规则权重立刻回升。
- ❌
:where(.reset-list) ul—— 外层.reset-list是 class，整条规则权重变成 0-1-0 - ✅
:where(ul, ol, dl)—— 纯元素选择器，权重稳稳 0-0-0 - ⚠️
:where([type="checkbox"])合法，属性选择器在括号内也归零；但:where(div.class)不行，.class一出现，权重就失效
哪些重置场景下:where()根本压不住 UA 样式
浏览器内置的 UA 样式（比如 input[type="search"]::-webkit-search-decoration）不在 :where() 作用范围内，且 UA 规则常带高权重或强制声明，单靠 :where(input[type="search"]) { ... } 无法覆盖。
-
button在 Firefox 中的默认 margin 常由display: inline-block隐式影响，仅设margin: 0不够，得配合display: revert或revert-layer - Shadow DOM 内部、CSS-in-JS 生成的样式，
:where()无法穿透作用域边界，重置只在当前 scope 生效 - 伪元素（如
::placeholder）不能直接放进:where()，必须单独写规则并提高特异性
:where() + all: unset 的真实副作用
看起来干净利落，实际会切断继承链、抹掉无障碍关键信号。
立即学习“前端免费学习笔记（深入）”；
-
:where(*) { all: unset; }会让color、font-family退回到初始值（通常是黑色、无字体），文字直接变丑 -
<select></select>丢掉原生下拉箭头，<input type="range">失去滑块轨道，用户和读屏软件都难识别控件意图 - 更稳妥的做法是分层控制：
:where(h1, h2, h3) { all: unset; font-size: inherit; font-weight: bold; }
和 normalize.css 是互补，不是替代
:where() 解决的是“权重干扰”问题，normalize.css 解决的是“浏览器行为不一致”问题。两者定位完全不同。
- 你仍需把
normalize.css放在所有自定义样式之前加载，否则它修正的 UA 差异会被后续样式盖掉 -
:where()适合写项目级工具类（如:where(.mt-2) { margin-top: 0.5rem; }）或局部重置（如弹窗内清空列表默认缩进） - 别用
:where(.grid) { display: grid; }这类关键布局规则——权重为 0 的规则在 DevTools 里排序靠后，出问题时第一反应不是它，排查成本反而更高
真正难处理的，从来不是怎么写 :where()，而是判断哪里**不该写**：当重置目标本身语义明确、浏览器表现稳定、且业务样式已形成约定时，硬套 :where() 只会让 CSS 的可维护性悄悄下滑。
