all: unset不是一键清空样式，而是按继承性智能切换：可继承属性（如color）设为inherit，不可继承属性（如margin、border）设为initial；它不重置UA默认样式（如button边框、h1字号），也不影响direction和unicode-bidi。

all: unset 不是一键清空样式，而是按继承性“智能切换”：可继承属性（如 color、font-family）变 inherit，不可继承属性（如 margin、border、width）变 initial。它不碰浏览器 UA 样式表里定义的默认值（比如 的边框、

的字号），也不能重置 direction 和 unicode-bidi。

为什么 color: unset 没变回黑色？

因为 color 是可继承属性，color: unset 等价于 color: inherit，会逐层向上查找父元素的计算值：

• 如果父元素设了 color: #666，子元素就显示浅灰
• 如果父元素没设，但 有 color: #1a1a1a，子元素照样继承这个深灰
• 想强制用浏览器默认黑？该写 color: initial，不是 unset

all: unset 会让按钮/输入框“消失”吗？

会，而且是功能性退化：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 的 border、padding、cursor、outline 全被重置为 initial（border 变成 none，outline 变成 0），键盘聚焦不可见
• 的边框、聚焦态、光标、甚至可选中行为可能异常——all: unset 不保留可访问性基础
• 常见误用：封装组件时对根元素加 all: unset，结果表单控件尺寸错乱、链接文字不可读、屏幕阅读器语义丢失

如何安全使用 all: unset 并补全基础样式？

它适合做“干净起点”，但必须手动补关键显示属性：

• 先加 display: inline-block 或 display: block，否则元素可能塌缩
• 补 margin、padding、border、font-family、line-height 等基础项，不能只依赖 UA 默认
• 对 、 这类纯语义标签可用，它们本就不该带强样式；但别直接套在 或 上
• 兼容旧版 IE？写成 color: inherit; color: unset;，IE 忽略后者，现代浏览器覆盖生效

真正容易被忽略的是：它的“智能”取决于继承链是否真实存在，而这个链可能跨多层、含 currentColor 或透明色，最终渲染效果必须实测，不能只看代码里写了什么。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！