CSS 中的 all 属性重置所有样式

CSS all 属性完全指南：一键重置所有样式

在构建网页时，你是否曾遇到过需要彻底清除某个元素自带的所有样式（包括浏览器默认样式和之前定义的任何 CSS）并重新开始的情况？或许你想把某个 div 变成一个纯粹的容器，或者将链接恢复成普通文本的样子。CSS 中的 all 属性就是为这种“一键重置”而生的强大工具。它能够一次性重置元素上除了 direction 和 unicode-bidi 之外的所有属性。

这篇教程将从零开始，用最通俗易懂的方式带你掌握 all 属性的用法、常见值和最佳实践，即使你是刚入门的前端新手也能轻松学会。

为什么需要 all 属性？

在学习具体语法前，先理解它的用武之地。通常我们会通过写很长的重置样式来覆盖一个元素的所有表现，例如：

.reset-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  /* 可能还有很多... */
}

这样的代码不仅冗长，还容易漏掉属性，而且每当需要覆盖一个带有多重特效的组件时，内心都是崩溃的。all 属性一行搞定，保证重置得干干净净。

基本语法与可用值

all 属性可以应用在任何 HTML 元素上，语法极其简单：

selector {
  all: 值;
}

它一共有 5 个有效关键词 作为值，每个关键词对应一种重置策略。下面逐一拆解。

1. initial

将所有属性重置为 CSS 规范定义的初始值，而不是浏览器的默认样式。例如 display 的初始值为 inline，无论你是 div、span 还是 p，应用后都会变成 display: inline。

示例：

.all-initial {
  all: initial;
}

此时元素会丢失所有外部样式和浏览器赋予的默认表现，变成纯粹的“空白画布”。

2. inherit

让元素的所有属性继承自父元素的值。即便某个属性通常不会继承（如 border、padding），使用 inherit 后也会强制继承。很适合需要让某个元素完全融入父元素环境的场景。

示例：

.all-inherit {
  all: inherit;
}

3. unset

这是一个智能混合模式：对于大多数属性，unset 等于 inherit（如果该属性可继承的话）；对于不可继承的属性，则等于 initial。换句话说，它让元素表现得好像没有为该属性指定任何值，回归到最自然的层叠状态，常用于移除之前声明的样式。

示例：

.all-unset {
  all: unset;
}

对于 color 这样的可继承属性，会变为 inherit；对于 border 这样的不可继承属性，会变为 initial（无边框）。

4. revert

将属性的值重置为浏览器默认样式（User Agent stylesheet 中的表现）。与 initial 不同，initial 是规范初始值，revert 是浏览器赋予的默认表现。例如一个 h1 元素，使用 revert 后会恢复成浏览器默认的大号加粗字体。

示例：

.all-revert {
  all: revert;
}

这个值是构建组件库时剥离多余样式但保留浏览器合理默认值的利器。

5. revert-layer

这是较新的值，用于配合 @layer 规则。它会将属性回退到**上一个级联层（cascade layer）**中设置的值。如果当前层之外没有值，则行为等同于 revert。该值在日常简单开发中用得不多，但在大规模样式架构中非常实用。

实战演示：重置按钮样式

假设你有一个普通的按钮，它自带了浏览器默认样式和项目里的一些自定义样式。现在我们希望把这个按钮变成一个纯文本链接的模样。

HTML：

<button class="btn-magic">我是一个按钮</button>

传统重置法：

.btn-magic {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

使用 all 属性：

.btn-magic {
  all: unset;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

效果完全一致，但代码量骤减。all: unset 移除了按钮的背景、边框、内边距、文本对齐等所有浏览器及开发者附加的样式，之后你只需添加自己需要的几行样式即可，心智负担极大降低。

完整的 all 值对比表

为了更直观地理解各个值的差异，我们通过一个表格进行对比：

小技巧：如果你不确定该用哪个值，可以这样记——想完全从空白开始用 initial，想融入父级用 inherit，想自然地抹掉所有指定样式用 unset，想恢复成浏览器默认表现用 revert。

需要注意的陷阱

尽管 all 强大，但使用时也要留心几个关键点：

1. direction 和 unicode-bidi 无法重置
   这两个属性控制文本方向（如从右到左的语言），CSS 规范规定它们不受 all 影响。如果你需要重置它们，必须单独设置。

2. all 是简写属性，但声明顺序很重要
   因为 all 会重置所有属性，所以它应该放在你想重置的样式的最前面，然后再写你真正需要的 CSS。
   ✅ 正确：

   .box {
     all: unset;
     background: lightblue;
   }
   

   ❌ 错误（新加的背景会被重置掉）：

   .box {
     background: lightblue;
     all: unset;
   }
   

3. 性能影响极小，但不要滥用
   现代浏览器对 all 做了优化，不过仍建议仅在确实需要完全重置的场景下使用，避免给每个元素都加上，保持样式的可控性。

4. revert-layer 的浏览器支持
   这个值在写作时支持度已不错（Chrome 99+, Firefox 97+, Safari 15.4+），但老项目需要注意兼容性。

实际应用场景

• 重置第三方组件内部样式
  当嵌入一个 CSS 污染严重的第三方小组件时，用 all: revert; 或 all: unset; 快速剥离，再重新定制。
• 建立无样式的原子容器
  比如一个仅用于布局的 div，希望它不带任何边距、轮廓，直接用 all: unset; 保证它干净得像透明胶带。
• 重置表单元素
  让 input、button、select 等脱去平台原生样式，打造统一的 UI，结合 all: unset; 效果立竿见影。
• 打印样式表
  在 @media print 中，用 all: initial; 清除掉所有花哨的动态效果，让内容回归朴素的黑白版面。

总结

CSS 的 all 属性就像一把“样式重置刀”，能让你用一行代码斩断元素的所有样式羁绊。掌握 initial、inherit、unset、revert 以及 revert-layer 这五种值，你就能在样式层叠的迷宫中拥有一个可靠的逃生出口。从今天起，告别冗长的重置代码，让 all 成为你征服 CSS 样式混乱的得力助手吧！