CSS 属性值 initial、unset 和 revert 的解析

大家好，我是前端架构师 ，关注微信公众号【程序员大卫】，免费领取前端最新面试资料。

背景

在 CSS 中，管理属性值和继承行为是创建健壮、可维护样式的基础。除了常见的具体数值（如 16px、#333）或通用值（如 inherit）之外，CSS 还提供了一些特殊的关键字，它们能重置或恢复属性值到其"默认"或前一个状态。

其中，initial、unset 和 revert 是三个功能强大且容易混淆的关键字。理解它们的区别，能帮助您更好地控制样式，尤其是在处理第三方组件或大型应用中的样式冲突时。

核心区别一览

关键字	作用	行为细节	适用场景
initial	重置为初始值	将属性重置为其在 CSS 规范中定义的初始值（就像该属性从未被设置过一样）。	确保属性值是浏览器默认的"出厂设置"，不考虑继承。
unset	重置为未设置值	如果该属性是可继承 的，则表现为 inherit（继承父元素的值）。 如果该属性是不可继承 的，则表现为 initial。	恢复属性到其自然的（默认的）继承行为。
revert	重置为上一个级联值	将属性重置为用户代理样式表 （浏览器默认样式）、用户样式表 或作者样式表中应用过的上一个值。它会撤销当前样式块的更改，恢复到级联链中更早的值。	撤销对属性的特定覆盖，恢复到浏览器或用户定义的样式，常用于恢复浏览器默认样式。

关键字详解与示例

为了更好地理解，我们主要关注 color（可继承）和 border（不可继承）这两个属性。

1. initial：回到起点

initial 总是将属性值设置为 CSS 规范中定义的初始值 。这个值是固定的，并且与该元素是否继承了父元素的值无关。

示例：

/* 初始设置 */
div {
  color: blue;
  border: 1px solid black;
}

/* 应用 initial */
.initial-demo {
  /* color 是可继承属性，但 initial 强制设为初始值 (通常是 black) */
  color: initial;
  /* border 是不可继承属性，initial 强制设为初始值 (none) */
  border: initial;
}

元素	父元素 div 的样式	.initial-demo 的样式	最终值
color	blue	initial	black (初始值)
border	1px solid black	initial	none (初始值)

2. unset：恢复自然状态

unset 是一个"智能"的重置。它根据属性的可继承性来决定行为：

• 可继承属性： 表现为 inherit。
• 不可继承属性： 表现为 initial。

示例：

/* 初始设置 */
div {
  color: blue;
  border: 1px solid black;
}

/* 应用 unset */
.unset-demo {
  /* color 是可继承属性，表现为 inherit */
  color: unset;
  /* border 是不可继承属性，表现为 initial */
  border: unset;
}

元素	父元素 div 的样式	.unset-demo 的样式	最终值
color	blue	unset $\to \; \backslash rightarrow$→ inherit	blue (继承自父元素)
border	1px solid black	unset $\to \; \backslash rightarrow$→ initial	none (初始值)

3. revert：撤销作者样式

revert 是最独特的。它沿着 CSS 级联（Cascading）链向上查找，恢复到上一个 被应用的值。它本质上是撤销了当前样式表中的属性定义，恢复到：

1. 用户样式（如果用户设置了）。
2. 浏览器默认样式（用户代理样式表）。
3. 如果以上都没有，则恢复到 unset 的行为。

它主要用于恢复浏览器默认样式，例如，您不想让某个 <h1> 标签应用您的全局字体样式，希望它用回浏览器默认的粗体大字。

示例：

假设浏览器默认样式是：h1 { font-weight: bold; }

/* 作者样式表 (您的代码) */
h1 {
  /* 覆盖了浏览器默认样式 */
  font-weight: normal; 
}

.revert-demo {
  /* 撤销了上方的 font-weight: normal; */
  font-weight: revert;
}

在这个例子中，.revert-demo 元素会将 font-weight 恢复到 浏览器默认值 (bold)，因为它撤销了作者样式表中的 normal 声明。

✅ 总结与应用建议

关键字	记忆点	应用场景
initial	"绝对初始"	确保属性值是其 CSS 规范定义的原始默认值，不考虑上下文。
unset	"智能重置"	恢复属性的自然继承行为 （可继承则 inherit，不可继承则 initial）。
revert	"撤销"	撤销作者样式，恢复到浏览器默认或用户样式。常用于希望保持浏览器默认外观的元素。

什么时候用哪个？

• 如果您想确保一个属性值是固定的、明确的 CSS 初始值 ，使用 initial。
• 如果您想让一个属性遵循其固有的继承规则 （即，可继承的就继承，不可继承的就使用初始值），使用 unset。
• 如果您想撤销您的样式对某个元素默认外观的覆盖 ，恢复到浏览器提供的默认样式，使用 revert。