如何在CSS中使用all:unset快速重置元素所有样式-css教程-PHP中文网

all: unset将可继承属性设为inherit、不可继承属性设为initial，清空margin、padding、border、display、color等几乎所有css属性，但不重置direction、unicode-bidi及ua默认样式。

如何在css中使用all:unset快速重置元素所有样式

all:unset 会清空哪些样式

all: unset 会把元素上所有可继承和不可继承的 CSS 属性，都重置为它们的初始值（initial）或继承值（inherit），具体规则是：可继承属性设为 inherit，不可继承属性设为 initial。

这意味着它会清掉 margin、padding、border、font-size、color、background、display、position 等几乎所有属性——但不会影响 direction 和 unicode-bidi（这两个始终强制继承），也不会重置自定义属性（--my-var）。

常见误判点：它不等于“还原浏览器默认样式”，而是按规范逐属性设初值。比如 display 在 div 上会变成 initial（即 inline），而不是保持 block。

什么时候该用 all:unset，而不是 reset 或 normalize

它适合局部、精准的样式剥离场景，比如：

封装一个完全中性的基础组件容器（如 <ui-button-base></ui-button-base>），后续只靠显式类名叠加样式
在 Shadow DOM 内部快速隔离宿主样式泄漏
调试时临时屏蔽某元素所有样式，确认是否为 CSS 层叠干扰

它不适合全局重置：all: unset 会让 h1 变成 font-size: medium、font-weight: normal，失去语义层级；也不推荐用于表单控件（input 的 border 和 background 清空后可能无法看清状态）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

all:unset 的兼容性与 fallback 方案

Chrome 37+、Firefox 27+、Safari 9.1+、Edge 79+ 支持；IE 完全不支持。

若需兼容旧环境，不能只靠 all: unset，得配合传统重置写法：

button.my-btn {
  all: unset;
  /* IE / legacy fallback */
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: default;
}

注意：font: inherit 比 font: initial 更安全，能保留父级字体族、大小等；cursor: default 是显式补漏，因为 all: unset 把 button 的 cursor: pointer 变成了 initial（即 auto），体验可能异常。