all: unset将可继承属性（如color、font-family）设为inherit，非继承属性（如margin、border、display）设为initial，但不重置ua默认样式、direction、unicode-bidi及伪元素样式。
all:unset 能重置哪些样式
all:unset 会把元素的所有 CSS 属性（包括继承属性和非继承属性）重置为 unset 关键字的语义值：继承属性变成 inherit，非继承属性变成 initial。
这意味着它不会清空继承链，反而可能放大父级影响——比如父元素设了 color: red，子元素用 all:unset 后，color 会继承红色，而不是变回默认黑。
- 它不重置
display、visibility、position等布局相关属性的“初始值”（因为它们是非继承属性，走initial） - 它重置
font-family、line-height、margin、padding等常见样式，但行为取决于该属性是否继承 - 它不重置伪元素样式（如
::before），也不影响内联样式优先级（!important仍生效）
什么时候该用 all:unset，而不是 all:initial 或 all:revert
all:unset 最适合「想抹掉组件自带样式，但保留设计系统层级传递的字体、颜色等基础风格」的场景，比如封装可复用的按钮或卡片组件。
-
all:initial把所有属性都设为规范定义的初始值（color: black、font-family: serif、margin: 0），视觉上更“干净”，但容易脱离设计系统 -
all:revert回退到浏览器 UA 样式表或父级样式表的值，行为更不可控，尤其在 Shadow DOM 或复杂 CSS 框架中容易出意外 -
all:unset是三者中最可控的中间态：既避免全盘重置导致字体/颜色突变，又切断组件自身声明的干扰
实际用法示例：
.btn-reset {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
}
注意：必须手动补回 display、box-sizing 等关键布局属性，否则按钮可能塌陷或错位。
all:unset 在真实项目中的典型坑
直接给一个通用组件加 all:unset 很容易翻车，尤其在以下情况：
- 使用了 CSS-in-JS 库（如 Emotion、Styled Components），其生成的 className 可能带高优先级内联样式，
all:unset无法覆盖!important声明 - 父容器用了
font-size: 0清除 inline-block 间隙，子元素all:unset后会继承这个 0，导致文字消失 - 表单控件（
<input>、<select></select>）本身有强 UA 样式，all:unset后外观极度简陋，且可能丢失 focus outline、user-select 行为等隐含体验 - 在 Safari 15.4 之前，
all:unset对contain、will-change等新属性支持不完整，可能触发渲染异常
替代方案：比 all:unset 更稳妥的“轻量重置”写法
如果目标只是清除第三方 UI 库（如 Ant Design、Element Plus）带来的样式污染，all:unset 往往用力过猛。更推荐组合式控制：
- 用
inherit: false（不合法）？不行——CSS 没这玩意儿 - 正确做法是明确列出要重置的属性，例如：
.custom-input { margin: 0; padding: 0; border: none; background: transparent; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
其中 font: inherit 是关键：它一次性重置 font-family、font-size、font-weight 等全部字体相关属性，且保持继承关系，比 all:unset 更精准、更易调试。
all:unset 看似一键解决，实则把“哪些该继承、哪些该归零”的决策权交给了 CSS 规范和父级上下文——而这两者，在复杂项目里往往并不透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
