all属性非万能，误用会破坏可访问性与兼容性；应优先精准控制属性，慎用all，避免全局应用，推荐revert而非unset或inherit。
all 属性不是万能的“清道夫”，用错会破坏可访问性
all 属性确实能一次性控制继承、重置或初始值，但它会无差别覆盖所有 CSS 属性，包括 color、font-family、cursor、outline 甚至 direction 和 unicode-bidi。比如 all: unset 会让按钮失去默认焦点轮廓（outline），导致键盘用户无法感知聚焦状态；all: initial 可能让中文文本变成 font-family: serif，丢失系统默认中文字体栈。
常见误用场景：在封装组件时对根元素写 all: unset，结果表单控件尺寸异常、链接不可见、屏幕阅读器语义被弱化。
实操建议：
- 优先用更精准的方式控制继承，例如只对特定属性显式设
inherit或revert - 若必须用
all，选all: revert（还原为浏览器 UA 样式或父级继承值）比unset更安全 - 永远避免在
body或全局组件容器上直接应用all，尤其不要加到* { all: ... }
想让子元素“继承父级所有样式”？别信 all: inherit
all: inherit 并不会让子元素继承父元素当前计算出的所有样式值——它只是把 all 这个简写属性本身设为继承，而 all 的取值（inherit）又会作用到每个子属性上。实际效果等价于逐个写 property: inherit，但很多属性本就不支持继承（如 display、margin、width），强行继承只会变成无效声明。
真正需要“继承视觉表现”的典型场景是自定义组件内嵌文字内容（如 my-button 里的 span），此时应：
- 明确列出需继承的关键属性：
color、font-size、line-height、font-family、text-align - 对非继承属性保持默认行为，不主动干预（比如让
margin仍走用户代理样式） - 用
revert替代inherit处理部分属性，例如cursor: revert能恢复的手型光标，而cursor: inherit可能从父容器继承一个不合适的值
解决继承冲突的本质是控制层叠顺序和来源权重
CSS 继承冲突往往不是“谁该继承”，而是“谁的声明更优先”。比如父元素设了 color: red，子元素又写了 color: blue，这时继承根本没机会发生——子元素已有更具体的声明。
排查这类问题的关键点：
- 打开浏览器开发者工具，看 Computed 面板里
color等属性旁是否标注 “inherited from …”；如果不是，说明本地声明已覆盖 - 注意
!important声明会压制继承值，哪怕写在父元素上（因它提升的是整个声明块的权重） - 使用
@layer或[data-theme]等机制组织样式来源，比依赖all更可控。例如深色主题切换时，用[data-theme="dark"] .text { color: var(--text-primary); }比在每个子元素上写all: revert更清晰
兼容性与性能：all 在老版本 Safari 和某些邮件客户端中完全失效
all 属性在 Safari ≤ 14.1、iOS Safari ≤ 14.5 中不被支持；Outlook（基于 Word 渲染引擎）和多数邮件客户端直接忽略它。这意味着依赖 all: unset 实现的“干净起点”在这些环境里会彻底回退到 UA 默认样式，造成布局偏移或字体突变。
性能方面，all 触发的重计算范围极大——浏览器需重新评估该元素及其所有后代的所有属性，比单独修改 color 或 font-size 开销高数倍。动画中滥用 all 容易引发强制同步布局（layout thrashing）。
稳妥替代方案：
- 用 CSS 自定义属性统一控制可变部分，例如
--text-color: #333，再让子元素通过color: var(--text-color)获取 - 对需重置的组件，用预设 class 如
.reset-typography显式重写关键属性，而非全量操作 - 服务端渲染或构建时注入基础 reset（如 modern-normalize），比运行时靠
all更可靠
实际项目里，最常被忽略的是 all 对 contain、will-change、scroll-behavior 等现代属性的隐式清除——它们没有默认值，all: unset 会让这些优化开关直接关闭，且难以在 DevTools 中察觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
