继承

在 CSS 中，继承控制当元素没有指定某个属性的值时会发生什么。

CSS 属性可分为两种类型：

请参阅任何 CSS 属性的定义，以查看特定属性是否默认继承（"Inherited: yes"）或不继承（"Inherited: no"）。

继承属性

当元素上没有为继承属性指定值时，该元素将获取其父元素上该属性的计算值。只有文档的根元素会获取属性摘要中给出的初始值。

继承属性的一个典型例子是color 属性。考虑以下样式规则和标记：

css

p {
  color: green;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

"emphasized text" 这些词将显示为绿色，因为 em 元素继承了 p 元素的 color 属性值。它不会获取属性的初始值（这是页面未指定颜色时用于根元素的颜色）。

当元素上没有为非继承属性指定值时，该元素将获取该属性的初始值（如属性摘要中所指定）。

非继承属性的一个典型例子是border 属性。考虑以下样式规则和标记：

css

p {
  border: medium solid;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

"emphasized text" 这些词将不会有另一个边框（因为 border-style 的初始值是 none）。

inherit 关键字允许作者显式指定继承。它适用于继承属性和非继承属性。

您可以使用all 简写属性一次性控制所有属性的继承，该属性将其值应用于所有属性。例如：

css

p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

这会将段落的 font 属性样式恢复为用户代理的默认值，除非存在用户样式表，在这种情况下则使用用户样式表。然后它将字体大小加倍并应用 "bold" 的 font-weight。

使用我们之前关于border 的示例，如果我们使用 inherit 显式设置继承，我们将得到以下结果：

css

p {
  border: medium solid;
}

em {
  border: inherit;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

我们在这里看到“emphasized text”周围有另一个边框。

规范
CSS 级联与继承第五级 # css-继承

此页面最后由 MDN 贡献者在 2025 年 10 月 10 日修改。