如何在CSS中使用all属性快速重置所有层叠样式-css教程-PHP中文网

all 属性不是“清空样式”，而是按 inherit/initial/unset/revert 规则重置所有 CSS 属性的计算值；其中 unset 对可继承属性取 inherit、对非继承属性取 initial（如 display 变为 inline），revert 则回退至 UA 样式表默认值，更安全但兼容性略弱。

如何在css中使用all属性快速重置所有层叠样式

all 属性不是“清空样式”，而是重置所有属性的计算值

all 是一个简写属性，它会一次性影响元素上**所有可继承或不可继承的 CSS 属性**，但它的行为取决于你给它的值：inherit、initial、unset 或 revert。很多人误以为 all: unset 就是“把样式全删了”，其实它只是按继承性分别处理：对 color 这类可继承属性等效于 inherit，对 margin 这类非继承属性则等效于 initial（比如 margin 变成 0）。所以它不会“清空”，而是“按规则归零或回溯”。

用 `all: unset` 时，`display` 会变成 `inline`，这是最大坑点

因为 display 的 initial 值是 inline，而 unset 对非继承属性就取 initial。这意味着：

原本是 （display: block）的元素，加了 all: unset 后会塌缩成行内表现，不再独占一行
原本是的列表，会失去块级容器特性，
也会错位


表单控件如 、 会退化为 inline，可能无法设置宽高或垂直对齐
解决办法很简单：在 all: unset 后显式覆盖 display，比如 display: block 或 display: flex，视语义而定。
为什么 all: revert 在 dialog 上更安全？
revert 不是回到 initial，而是回到浏览器用户代理样式表（UA stylesheet）的默认值。比如：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										


dialog 元素加 all: revert 后，它仍保持 display: block、带阴影、居中、可聚焦等 UA 行为

button 仍保留原生按钮的边框、背景色、焦点 outline（除非 UA 显式禁用）
它比 unset 更“尊重语义”，适合需要保留基础交互能力的组件封装

但注意：revert 兼容性略弱于 unset（Firefox 67+、Chrome 93+、Safari 14.5+），老项目慎用。
局部重置比全局 all 更可控
直接对 * { all: unset } 这类通配符写法，极易引发连锁布局崩溃——子元素继承的是父元素已重置后的值，而非原始 UA 值。实际推荐方式是：

只对明确需要“白板化”的封装容器使用，例如自定义弹窗、微件（widget）、Web Component 的 shadow root 内部
配合类名精准作用域：.custom-card { all: unset; display: block; }

避免在 body 或通用容器上滥用；若真要全局清理，优先用 normalize.css 或 reset.css，它们经过大量测试，不破坏语义流

all 是个锋利的工具，它不判断上下文，只执行规则。用之前，先想清楚你要重置的是“视觉表现”，还是“语义行为”——后者往往不能靠一招 all 解决。