all: unset 并非清除样式，而是将可继承属性设为inherit、不可继承属性设为initial，导致display变inline、表单控件丢失边框/焦点环等问题；应优先使用all: revert恢复UA默认样式。
all: unset 只影响继承属性，非继承属性照旧
加了 all: unset 后，color、font-family、line-height 这类可继承属性会回退到父级值；但 margin、padding、border、display 等不可继承属性会变成规范初始值（比如 display: initial → inline），而不是你期望的“清空”或“还原浏览器默认”。这会导致 div 塌缩、按钮边框消失、input 失去焦点环等实际问题。
用 :where() + all: unset 避免污染原生语义
直接写 * { all: unset; } 是高危操作——它会让所有元素（包括 button、a、input）失去 UA 默认行为。更安全的做法是限定范围：
:where(.component) * {
all: unset;
}
:where(.component) > * {
display: block;
}
:where(.component) input,
:where(.component) button {
all: revert;
}
-
:where()保证零优先级，不干扰已有样式规则 -
all: unset放在组件内部子元素上，只隔离局部继承链 - 必须手动恢复
display，否则子元素可能变inline导致布局错乱 - 对表单控件这类强语义元素，立刻用
all: revert拉回 UA 默认样式
为什么 all: unset 不等于“清除样式”
它不是删除样式，而是按 CSS 规范做两件事：可继承属性设为 inherit，不可继承属性设为 initial。这意味着：
-
body的margin: 8px来自 UA 样式表，all: unset完全不动它 -
button的默认边框是 UA 写死的，all: unset只把它覆盖成border: none，不是“清除” -
box-sizing初始值是content-box，all: unset会把它打回去，宽高计算可能突然出错
真正需要重置时，优先选 all: revert
如果你的目标是“让元素回到浏览器原本该有的样子”，all: revert 才是正确选择。它会主动查找并应用 UA 样式表中对该元素定义的原始值：
-
button { all: revert; }→ 恢复边框、手型光标、focus outline -
input { all: revert; }→ 恢复 padding、border-radius、focus ring
注意兼容性：Chrome 93+、Firefox 95+、Safari 14.1+ 支持，Android WebView ≤10 仍不支持。别在关键交互控件上赌 all: unset ——可访问性失效往往就发生在你忽略 outline 和 cursor 的那一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
