all属性非万能，误用会破坏可访问性与兼容性；应优先精准控制属性，慎用all，避免全局应用，推荐revert而非unset或inherit。
all 属性不是“一键清空样式”的安全开关，它会无差别切断所有 CSS 属性的继承链和 UA 样式关联——用错地方，按钮变透明、输入框不可聚焦、中文字体突然变 serif，都是真实发生的线上问题。
为什么 all: unset 加上去元素“不见了”或“不能用了”
因为 all: unset 对非继承属性（如 border、padding、outline、cursor、display）设为 initial，而很多 initial 值根本不符合视觉预期：
-
border变成none→ 按钮边框消失，键盘聚焦轮廓（outline）归零 → 无障碍访问直接失效 -
display回到initial（即inline）→ 原本是block的div或section塌缩成一行 -
font-family是可继承属性，unset等价于inherit→ 若父级没设字体，最终 fallback 到 UA 默认（可能不含中文字体栈），中文渲染异常 -
all: unset不影响direction和unicode-bidi，但这两个属性被强制锁定后，RTL 布局可能意外错乱
all: revert 才是多数场景下的更安全选择
它优先尝试恢复浏览器 UA 样式表定义的值（比如原生 button 的尺寸、焦点 outline、手型光标），仅当 UA 未定义时才退回到继承值。这比 unset 更贴近“回归原生可用状态”：
- 对
input、select、textarea加all: revert，能保留默认内边距、聚焦态、可选中行为 - 在 Shadow DOM 内部使用时，
revert仍会查找该上下文中的 UA 样式，而非穿透到外层文档 - 注意：Firefox 对某些 SVG 属性的
revert行为不一致；Chrome/Safari 支持更稳定 - 别在
@layer或带!important的规则后依赖revert，结果不可控
哪些地方绝对不能加 all
全局滥用等于主动破坏基础体验：
立即学习“前端免费学习笔记（深入）”；
-
* { all: unset; }或body { all: initial; }→ 滚动条消失、textarea文字贴边、h1字号归零、焦点轮廓不可见 -
html或body上用all→ 会重置font-size、line-height、text-rendering等底层渲染控制，中文字体抗锯齿可能退化 -
fieldset、legend、details等语义化容器上用all: inherit→ 可能覆盖其默认尺寸与可访问性语义，屏幕阅读器读取异常 - Android 4.4–4.4.4 WebView 存在
all渲染 bug，IE 全系不支持 —— 需要兼容旧环境时，必须绕开
真要局部“归零”，推荐组合写法
与其赌 all 的行为一致性，不如明确控制关键属性。封装自定义组件根节点时，更可靠的做法是：
- 用
all: unset清除继承干扰，但立刻补上基础显示属性：display: inline-block（或block）、box-sizing: border-box - 显式重置盒模型：
margin: 0、padding: 0、border: none——all: unset不动 UA 默认padding-inline-start（ul缩进），得手动清 - 文字类属性按需继承：
color: inherit、font-size: inherit、line-height: inherit，而不是靠all: inherit（它对margin、width等无效） - 需要还原某个具体属性的 UA 行为？直接写
cursor: revert、outline: revert，比整个all更轻量、更可控
真正难的不是写出 all: revert，而是判断这个元素是否真的需要脱离整个样式上下文 —— 大部分时候，精准覆盖比全局重置更稳，也更容易调试。
