all: unset 仅在明确不依赖ua样式且已手动补全display、border等关键属性时才安全；否则会导致按钮不可聚焦、输入框无边框等功能退化，真正适用场景极窄。
all: unset 在清理第三方组件样式时“有用”，但这个“有用”是有严格前提的：它只在你明确知道该组件**不依赖浏览器 UA 默认样式**，且**已手动补全 display、border、outline 等关键属性**时才成立。否则，它大概率会让按钮不可聚焦、输入框无边框、文字无法选中——不是清掉了污染，而是清掉了功能。
为什么 all: unset 会被误认为“万能隔离方案”
很多开发者看到“一次性重置所有样式”就直接套在第三方容器上，比如：
.third-party-widget * { all: unset; }
这看似干净，实则危险。原因在于：
-
all: unset对可继承属性（如color、font-family）走inherit，会把父级全局样式（比如* { font-family: Arial; }）继续透传下去，根本没隔离 - 对不可继承属性（如
border、outline、cursor、display）走initial，而border: initial是none，outline: initial是0，display: initial是inline—— 这些值和浏览器原生控件的 UA 样式完全冲突 - 它不重置
direction和unicode-bidi，但若第三方库是 RTL 布局，这两个属性被父级强制锁定后，all: unset不会恢复它们，导致文本方向错乱
all: unset 真正适用的场景其实很窄
它只适合用在语义纯净、无交互需求、纯展示类元素上，比如：
-
<del></del>、<mark></mark>、<small></small>这类本就不该带强样式的 HTML 元素 - 你自己封装的“卡片内容区”根节点，且你已显式声明：
display: block、border: 1px solid #e0e0e0、outline: none、cursor: default - 配合
font-family、line-height、margin等基础属性一起使用，作为“起点重置”，而非“终点清空”
更安全的替代方案是 all: revert
如果你的目标是让第三方组件“回归它本来该有的样子”，而不是“变成一张白纸”，all: revert 才是更合理的选择：
-
all: revert优先恢复浏览器 UA 样式表定义的值 —— 比如<button></button>的默认边框、焦点 outline、手型光标；<input>的默认 padding 和 border-radius - 只有当 UA 没定义时（比如自定义标签
<my-card></my-card>），才退回到继承值，不会破坏可访问性基础 - 它对全局污染的抵抗更强：父级设了
color: red，all: revert下的<button></button>文字仍是 UA 默认色（通常是深灰），而不是继承红色 - 注意：
all: revert在 Safari 14.1+、Chrome 93+、Firefox 95+ 支持良好，但旧版 Edge 和部分安卓 WebView 仍需检查兼容性
真正难的不是写 all: unset，而是判断哪些属性被重置后会导致功能退化——比如 outline: 0 看似只是去掉虚线，实际等于关闭键盘导航支持；cursor: default 看似只是改指针形状，实际可能掩盖按钮的可点击语义。这些细节，all 类属性一个都不会提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
