all: unset 不能清空第三方组件样式，仅重置已声明属性，对高权重、!important、内联样式及 ua 默认样式无效，会导致按钮失边框、无焦点轮廓、光标异常；安全使用需满足纯展示、手动补全显示属性、放弃可访问性、避开旧浏览器；推荐局部重置或 all: revert。
all: unset 不能直接“清空”第三方组件的样式
它只重置当前元素上已声明的 CSS 属性，对第三方库通过高权重选择器（如 .btn-primary:focus）、!important 或内联样式施加的规则无效。更关键的是：all: unset 不会覆盖浏览器 UA 样式表定义的默认行为（比如 button 的边框、input 的 focus ring），而很多第三方组件恰恰依赖这些基础样式来维持可访问性。
为什么给第三方组件根元素加 all: unset 后按钮变“不可见”
常见现象是按钮失去边框、焦点轮廓消失、鼠标悬停无手型光标——这不是 bug，而是 all: unset 按规范执行的结果：
-
border、outline、cursor是不可继承属性，被设为initial→border: none、outline: 0、cursor: auto -
color、font-family是可继承属性，被设为inherit→ 实际颜色取决于父级，可能极淡或透明 -
padding、line-height等非继承属性也被设为initial，但 UA 默认值（如button的padding: 1px 6px）未被触碰，所以部分尺寸仍存在，造成视觉错乱
安全使用 all: unset 重置第三方组件的实操条件
必须满足以下全部条件才建议用：
- 目标组件是纯展示型、无交互语义的封装（如自定义图标、装饰性卡片），不包含
button、input、a等原生控件 - 你已手动补全基础显示属性：
display: block或inline-block（否则可能塌缩）、margin、padding、font-family、line-height - 明确放弃键盘聚焦、屏幕阅读器兼容等可访问性保障（
all: unset会让outline归零，且无法恢复 UA 默认 focus ring） - 项目不需兼容 IE 或 Android WebView ≤10：这些环境完全忽略
all: unset，导致样式断裂
更稳妥的替代方案：局部重置 + 显式覆盖
对大多数第三方组件，比 all: unset 更可控的做法是：
- 用
@layer reset提前导入 Normalize.css 或 Tailwind 的base层，统一 UA 差异，再叠加组件样式 - 针对具体属性显式覆盖：
margin: 0、padding: 0、border: none、background: transparent，避免影响outline和cursor - 需要真正恢复浏览器默认行为时，改用
all: revert（Chrome 93+ / Firefox 95+ / Safari 14.1+ 支持），它会主动查找并应用 UA 样式表中的原始值 - 若必须降级兼容旧环境，用
color: inherit; color: unset;这类渐进增强写法，IE 忽略后者，现代浏览器生效
真正容易被忽略的是：all: unset 的效果高度依赖继承链的真实状态——父级是否设置了 currentColor、是否用了 CSS 变量、是否跨 Shadow DOM，最终渲染结果必须在真实设备上逐个验证，不能仅靠 DevTools 计算值判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
