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 参考:
- 方位角
- 边框收起
- border-spacing
- caption-side
- 颜色
- cursor
- direction
- 空单元格
- font-family
- font-size
- 字体样式
- 字体变体
- 字体粗细
- 字体
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 孤立
- 引用
- 文本对齐
- 文本缩进
- text-transform
- 可见性
- 空白
- 丧偶
- word-spacing
继承的运作方式
默认情况下,每个 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;
}
检查您的理解情况
检验您对遗传知识的掌握情况
以下哪些属性是可继承的?
line-height
animation
text-align
color
font-size
除非没有要继承的内容,否则哪个值的行为类似于 inherit
是否像 initial
一样?
superset
reset
unset