继承

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

CSS 属性可以分为两种类型

  • **继承属性**，默认情况下设置为父元素的计算值
  • **非继承属性**，默认情况下设置为属性的初始值

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

继承的属性

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

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

css
p {
  color: green;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

单词“强调文本”将以绿色显示，因为em元素继承了p元素的color属性的值。它不会获得属性的初始值（即当页面未指定颜色时用于根元素的颜色）。

非继承的属性

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

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

css
p {
  border: medium solid;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

单词“强调文本”将不会有另一个边框（因为border-style的初始值为none）。

注意

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

可以使用all速记属性来控制所有属性的继承，该属性将其值应用于所有属性。例如

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

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

覆盖继承，一个例子

使用我们之前带有border的例子，如果我们使用inherit显式设置继承，我们将得到以下结果

css
p {
  border: medium solid;
}

em {
  border: inherit;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

我们可以在这里看到单词“强调文本”周围的另一个边框。

另请参阅