沿用情况

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;
}

然后,您将链接元素添加到内容文章中, 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 属性的 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 样式额外添加了几个属性,会出现什么情况? 系统将仅应用为 margincolor 设置的规则。

/* 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
🎉

除非没有要继承的内容,否则哪个值的行为类似于 inherit 是否像 initial 一样?

reset
不是有效的值,请重试!
unset
🎉
superset
不是有效的值,请重试!

资源