css继承

在现实生活中看到继承行为是常见的。除非有其他因素发挥作用,通常情况下,高大的父母有高大的孩子,等等。 我们可以在CSS中看到类似的东西。这是张图片
如果将容器元素上的颜色设置为绿色,则除非某些规则覆盖该颜色值,否则容器中所有元素的颜色将为绿色。将某些属性的值从父元素传递给子元素的机制称为继承

在本文中,您将了解继承的不同方面以及它如何影响不同元素的外观。

更多来自这个作者

CSS继承如何使用用?

CSS继承大大减少了创建网站所需的时间和精力。想象一下,你需要写多少CSS来设置body标签的所有子代的颜色。这将耗费时间,容易出错,难以维护。同样,你可以想象那将是一场噩梦的如果你被迫设置字体类型或字体大小在每个子元素的容器。

请看下面的演示:

请参阅 CodePen上SitePoint(@SitePoint)的Pen css继承示例

这里我已经在body元素中定义了font-family,font-size和line-height属性,但所有这些值都是由嵌套在body中的不同元素继承而来的。这使得布局的均匀性不需要在多个元素上重复相同的属性。

只有某些属性被继承

在现实生活中,并非所有父元素的属性都传递给他们的子元素。CSS也是如此;并非每个css属性都默认由子元素继承。事实上,如果所有属性都继承了,其效果将类似于根本没有继承,您必须编写大量CSS来覆盖此行为。
例如,如果border属性是可继承的,则在单个元素上设置边框将导致在其所有子元素上显示相同的边框。同样,如果子元素从他们的父元素继承了background-image属性,结果就会变得混乱。 以下CodePen示例演示了如何使用CSS关键字值来查看这种情况,我将在下一节中讨论:

See the Pen How Borders Would Work if they Inherited by Default by SitePoint (@SitePoint) on CodePen.

强迫继承

一般来说,是否要把属性继承下来是常识。例如,除了上一节中讨论的示例之外,您可能不希望元素的所有子元素都继承其父元素的填充值。但是,您通常更喜欢文本的颜色或者容器的不同子元素使用的字体是相同的。在某些情况下,特定属性可能不可继承,但您可能仍希望从父元素继承。这可以通过将子元素的该属性的值设置为继承来实现:

1
2
3
.some-child {
color: inherit;
}

假设您想要将网站上所有链接元素的颜色与其父元素上定义的颜色相同。有几种方法可以做到这一点。例如,您可以使用不同的类用于具有不同颜色的链接和容器元素。但是,最简单的方法之一是使用inherit关键字。一旦超链接元素的颜色属性设置为 inherit,它们开始继承父元素的颜色:

1
2
3
4
5
6
7
8
9
10
11
p {
color: #f44336;
}

ul {
color: #3f51B5;
}

a {
color: inherit;
}

这儿有个例子:

See the Pen Using the inherit keyword to force inheritance by SitePoint (@SitePoint) on CodePen.

用 CSS 缩写的继承性

inherit 关键词的一个特征就是,当你应用缩写属性到元素上面时,会作用到所有子属性,即使你可能没有意识到的最初被迫继承。同时,用了缩写后,你不能再特别设置子属性的值。例如,您可能希望以下CSS样式应用于1px宽度的边框,其颜色从父元素继承。 但是,声明实际上是无效的:

1
2
3
4
.example {
/* Invalid CSS */
border: 1px solid inherit;
}

类似地,不能使用简写属性将margin或padding设置一侧为固定值和另一侧继承值。 再次声明这是无效的:

1
2
3
4
.example {
/* Invalid CSS */
margin: 10px inherit 20px 15px;
}

这个问题的一个解决方案是,将您想要继承的属性设置为一些任意值,然后使用相应的普通属性继承:

1
2
3
4
.example {
margin : 10px 0 20px 15px;
margin-right: inherit;
}

缺失的简写值

在编写简写属性时,任何缺失的子属性没有显式提供其值那么将会被设置为其初始值(或默认值)。 考虑下面的CSS:

1
2
3
4
5
6
7
.container-a {
font: italic 1.2em/1.75 Lato;
}

.container-a p {
font: bold 1em Lato;
}

在这里,段落文本将不会从其容器继承font-style的值。font-style值实际上将被重设为正常的初始值。 因此,在这种情况下,如果您想要继承父元素字体的简写属性,同时仍然确保该段保持粗体,则必须使用font-weight普通属性。

详情请看 CSS Inheritance and Shorthand by SitePoint (@SitePoint) on CodePen.

使用DevTools查看继承的值

可以使用DevTools来查看元素从其父项或DOM树中的另一个元素继承的属性。 如前所述,并不是父元素的所有属性都是可继承的。 所有可继承的属性也不会将其转到继承链的末尾,而不会被别的其他CSS规则覆盖。

DevTools为您提供不同的视觉线索,以便轻松区分所有这些属性,您可以从下面的截图中看到,从SitePoint的CSS中获取:
DevTools
所选元素不可继承的任何属性都会变暗。可继承但被覆盖的属性将以穿透文本显示。

CSS可继承属性列表

似乎没有一个唯一的明确的来源列出所有可继承的CSS属性,但下面是一个可能是正确的列表,基于几个来源:

  • border-collapse

  • border-spacing

  • caption-side

  • color

  • cursor

  • direction

  • empty-cells

  • font-family

  • font-size

  • font-style

  • font-variant

  • font-weight

  • font-size-adjust

  • font-stretch

  • font

  • letter-spacing

  • line-height

  • list-style-image

  • list-style-position

  • list-style-type

  • list-style

  • orphans

  • quotes

  • tab-size

  • text-align

  • text-align-last

  • text-decoration-color

  • text-indent

  • text-justify

  • text-shadow

  • text-transform

  • visibility

  • white-space

  • widows

  • word-break

  • word-spacing

  • word-wrap

还有一些与语音相关css属性 也是可以继承的 但不包含在上面列表中

以下是继承的属性列表的几个来源:

您还可以在规范中或任何全面的CSS引用中查看单个CSS属性的信息,通常会告诉你该属性是否在默认情况下继承。

结论

总结我的讨论: 继承允许你避免编写重复的CSS规则,以将同一组属性应用于元素的所有子代。它大大简化了向网页添加样式的过程,因此是CSS的一个很好的功能。CSS还允许您使用继承关键字来强制继承属性,这些属性不是默认继承的。DevTools可以让你轻松访问元素从其父元素继承的所有属性。这可以帮助你快速找出常见布局相关问题的解决方案。

原文:CSS Inheritance: An Introduction / CSS 继承:入门
作者:Asha Laxmi
翻译者: @pauli @render

推荐文章