CSS 继承与重置：initial、inherit、unset 怎么选

理解 initial、inherit、unset 最有效的方式，不是背定义，而是先问“这个属性本来会不会继承”。因为 unset 的行为就取决于这一点。文本颜色、字体这些通常会继承；宽高、边距、背景、定位这些通常不会。

目录

• 三个关键字先看结论
• 哪些属性通常会继承
• 哪些属性通常不会继承
• initial、inherit、unset 的真实差异
• 什么时候该用 inherit
• 什么时候该用 initial
• 什么时候该用 unset
• 实战里怎么选
• 参考资料

三个关键字先看结论

最容易误解的是：initial 不是“恢复浏览器当前看到的样子”，而是“恢复这个属性在规范里的初始值”；inherit 也不是“像平时那样自然继承”，而是无论该属性本来是否可继承，都强制继承父值。

哪些属性通常会继承

大体上，和文本呈现强相关的属性会继承：

• color
• font-family
• font-size
• font-weight
• line-height
• text-align
• letter-spacing
• word-spacing
• visibility
• cursor

所以这种写法很常见：

article {
  color: #d4d2cb;
  line-height: 1.8;
}

子元素大多会自动沿用这些值，不需要你一层层重复写。

如果你发现字号和间距的相对关系很混乱，往往不是 inherit 没写，而是根字号、em / rem 体系本身没理顺。这个问题可以配合看 rem 与根字号指南。

哪些属性通常不会继承

布局和盒模型属性通常不会继承：

• width
• height
• margin
• padding
• border
• display
• position
• top / right / bottom / left
• background
• overflow
• transform
• z-index

这是合理的。否则父元素一改 display: flex 或 position: relative，所有子元素都跟着继承，布局会非常难控制。

initial、inherit、unset 的真实差异

先看一个最容易理解的可继承属性：color。

<div class="parent">
  <p class="a">initial</p>
  <p class="b">inherit</p>
  <p class="c">unset</p>
</div>

.parent {
  color: royalblue;
}

.a {
  color: initial;
}

.b {
  color: inherit;
}

.c {
  color: unset;
}

结果通常是：

• .a 回到颜色初始值
• .b 继承父元素的 royalblue
• .c 因为 color 本来可继承，所以效果等同于 inherit

再看一个不会继承的属性：margin-left。

.parent {
  margin-left: 40px;
}

.a {
  margin-left: initial;
}

.b {
  margin-left: inherit;
}

.c {
  margin-left: unset;
}

此时：

• .a 回到初始值
• .b 会强制拿到父级 40px
• .c 因为 margin-left 默认不继承，所以效果更像 initial

这就是为什么 unset 常被理解成“按属性继承特性自动选边站”。

什么时候该用 inherit

inherit 适合你明确知道“这个子元素就该和父元素一致”的场景，比如 SVG 图标继承文本颜色：

.button {
  color: white;
}

.button svg {
  fill: currentColor;
}

或者你要让某个原本不继承的属性也继承：

.card {
  border-radius: 16px;
}

.card img {
  border-radius: inherit;
}

这里比重复写 16px 更稳，也避免以后父元素改半径时忘记同步。

什么时候该用 initial

当组件被包在很多上层样式里，而你想明确切断某个继承结果时，用 initial 更直接：

.editor {
  text-align: center;
}

.editor code {
  text-align: initial;
}

不过要注意，initial 是回到属性初始值，不一定等于“浏览器默认展示结果”。所以用它前最好知道该属性的初始行为。

什么时候该用 unset

unset 更像一个中性选择，适合做通用组件重置：

.button-reset {
  all: unset;
}

或者针对单个属性：

.field {
  color: unset;
  margin: unset;
}

它的优点是不需要你逐个判断属性是否可继承；缺点是团队里如果大家不清楚继承规则，读代码时会多一步脑内判断。

实战里怎么选

• 想恢复属性自己的默认规则：initial
• 想明确跟父级同步：inherit
• 想让浏览器按继承规则自动决定：unset

如果你是在处理动画或覆盖层问题，不要把层级、图层和继承混在一起。z-index 失效通常和继承没关系，而是 Stacking Context 与 z-index 规则；动画卡顿更多是 重排与重绘。

参考资料

• MDN: CSS inheritance