继承

CSS 播客 - 005：继承

假设您刚刚编写了一些 CSS 以使元素看起来像一个按钮。

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

然后，您向内容文章添加一个 link 元素，将 class 值为 .my-button。但是存在一个问题，文本不是您预期的颜色。这是如何发生的？

如果未指定值，某些 CSS 属性会继承这些属性。 就此按钮而言，它会从以下 CSS 继承 color：

article a {
  color: maroon;
}

在本课中，您将了解为什么会出现这种情况，以及继承是一项强大的功能，可帮助您减少编写 CSS 的工作量。

继承流程

我们使用这段 HTML 代码段了解一下继承机制：

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

根元素 (<html>) 不会继承任何内容，因为它是文档中的第一个元素。在该 HTML 元素上添加一些 CSS，该元素便会开始沿文档向下级联。

html {
  color: lightslategray;
}

默认情况下，其他元素会继承 color 属性。html 元素具有 color: lightslategray，因此，所有可以继承颜色的元素现在的颜色均为 lightslategray。

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

只有 <p> 会有斜体文本，因为它是最深的嵌套元素。继承只会向下流动，而不会向上流向父元素。

默认情况下，哪些属性是继承的？

默认情况下，并非所有 CSS 属性都会继承，但有很多 CSS 属性会继承。 下面列出了默认继承的属性的完整列表（摘自所有 CSS 属性的 W3 引用）：

沿用的运作方式

默认情况下，每个 HTML 元素都有一个使用初始值定义的每个 CSS 属性。初始值是不继承的属性，如果级联未能计算该元素的值，则初始值显示为默认值。

可继承的属性向下级联，子元素将获得一个计算值，该值表示其父元素的值。这意味着，如果父元素将 font-weight 设置为 bold，则所有子元素都将以粗体显示，除非其 font-weight 设置为其他值，或用户代理样式表为该元素设置了 font-weight 值。

如何明确继承和控制继承

继承可能会以意想不到的方式影响元素，因此 CSS 提供了相关工具来帮助解决此问题。

inherit 关键字

您可以使用 inherit 关键字使任何属性继承其父项的计算值。使用此关键字的实用方法是创建例外情况。

strong {
  font-weight: 900;
}

此 CSS 代码段将所有 <strong> 元素的 font-weight 设为 900，而非默认的 bold 值，后者等同于 font-weight: 700。

.my-component {
  font-weight: 500;
}

.my-component 类会改为将 font-weight 设置为 500。如需使 .my-component 中的 <strong> 元素也添加 font-weight: 500，请添加：

.my-component strong {
  font-weight: inherit;
}

现在，.my-component 内 <strong> 元素的 font-weight 将为 500。

您可以明确设置此值，但如果将来使用 inherit 和 .my-component 的 CSS 发生更改，则可以保证您的 <strong> 会自动与其保持同步。

initial 关键字

继承可能会导致元素出现问题，并且 initial 为您提供了强大的重置选项。

您之前已经了解到，CSS 中的每个属性都有一个默认值。initial 关键字会将属性设置回初始默认值。

aside strong {
  font-weight: initial;
}

此代码段将移除 <aside> 元素内所有 <strong> 元素的粗体粗细，并使其成为正常粗细（初始值）。

unset 关键字

无论是否默认继承了某个属性，unset 属性的行为都会有所不同。如果属性在默认情况下是继承的，则 unset 关键字将与 inherit 相同。如果默认情况下不继承该属性，则 unset 关键字等于 initial。

要记住默认情况下继承哪些 CSS 属性并非易事，在这种情况下，unset 会很有帮助。例如，默认情况下继承 color，但 margin 不继承，因此您可以编写以下内容：

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

现在，margin 会被移除，color 会还原为继承的计算值。

您也可以将 unset 值与 all 属性搭配使用。回到上面的示例，如果全局 p 样式额外获得了几个属性，会发生什么情况？ 系统只会应用为 margin 和 color 设置的规则。

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

如果您将 aside p 规则更改为 all: unset，将来对 p 应用哪些全局样式无关紧要，这些样式将始终处于未设置状态。

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

检查您的掌握程度

考查您对继承知识的掌握情况

以下哪些属性是可继承的？

animation
动画不会传递给子级。
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

除非没有要继承的内容，并且其行为类似于 initial，否则哪个值的行为类似于 inherit？

reset
不是有效值，请重试！
unset
🎉
superset
不是有效值，请重试！

资源