css 继承_CSS继承：简介

css 继承

It’s common to see inheritance in action in real life. Unless some other factor comes into play, it’s often the case that tall parents have tall children, and so on. We can see something similar in CSS.

在现实生活中看到继承在行动中是很常见的。 除非有其他因素起作用，否则高个子父母经常有个高个子，等等。 我们可以在CSS中看到类似的内容。

If you set the color on a container element to green, then unless some rule overrides that color value, the color of all the elements inside the container will be green. The mechanism through which the value of certain properties is passed on from parent elements to child elements is called inheritance.

如果将容器元素的颜色设置为绿色，则除非某些规则覆盖该颜色值，否则容器内所有元素的颜色将为绿色。 某些属性的值从父元素传递到子元素的机制称为继承。

In this article, you will learn about different aspects of inheritance and how it affects the appearance of different elements.

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

CSS继承有何用处？ (How is CSS Inheritance Useful?)

CSS Inheritance greatly reduces the time and effort required to create a website. Imagine how much CSS you would have to write to set the color on all children of the body tag. This would be time consuming, error prone, and difficult to maintain. Similarly, you can imagine what a nightmare it would be if you were forced to set the font-family or font-size on every child element of a container.

CSS继承大大减少了创建网站所需的时间和精力。 想象一下，您需要编写多少CSS才能在body标签的所有子标签上设置颜色。 这将很耗时，容易出错并且难以维护。 同样，您可以想象如果被迫在容器的每个子元素上设置font-family或font-size ，那将是一场噩梦。

Look at the following demo:

看下面的演示：

See the Pen CSS Inheritance example by SitePoint (@SitePoint) on CodePen.

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

Here I’ve defined the font-family, font-size, and line-height properties on the body element but all these values are inherited by different elements nested inside body. This brings uniformity to the layout without the need to repeat the same properties on multiple elements.

在这里，我已经在body元素上定义了font-family ， font-size和line-height属性，但是所有这些值都由嵌套在body内的不同元素继承。 这为布局带来了统一性，而无需在多个元素上重复相同的属性。

仅某些属性被继承 (Only Certain Properties are Inherited)

In real life, not all attributes of parents are passed on to their children. The same is true in CSS; not every CSS property is inherited by default by child elements. In fact, if all properties were inherited, the effect would be similar to having no inheritance at all and you would have to write a lot of CSS to override this behavior.

在现实生活中，并非父母的所有属性都会传递给孩子。 CSS也是如此。 并非每个CSS属性默认都由子元素继承。 实际上，如果所有属性都被继承，其效果将类似于完全没有继承，并且您将不得不编写大量CSS来覆盖此行为。

As an example, if the border property was inheritable, setting a border on a single element would cause the same border to appear on all its child elements. Similarly, if children inherited the background-image property from their parents, the result would be messy. The following CodePen example demonstrates how this sort of thing would look using a CSS keyword value that I’ll discuss in the next section:

例如，如果border属性是可继承的，则在单个元素上设置边框将导致同一边框出现在其所有子元素上。 同样，如果孩子从父母那里继承了background-image属性，结果将很混乱。 下面的CodePen示例演示了如何使用CSS关键字值(在下一节中将要讨论的内容)看起来这种情况：

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

请参阅Pen， 如果 CodePen上的SitePoint ( @SitePoint ) 默认继承了边框，边框将如何工作 。

强制继承 (Forcing Inheritance)

Generally speaking, whether or not to make a property inheritable comes down to common sense. For example, in addition to the examples discussed in the previous section, you probably don’t want all the children of an element to inherit the padding value of their parent. However, you would often prefer if the color of text or the font used for different child elements of a container was the same.

一般来说，是否使一个属性可继承归结于常识。 例如，除了上一节中讨论的示例之外，您可能不希望元素的所有子元素都继承其父元素的填充值。 但是，如果容器的不同子元素使用的文本颜色或字体相同，则通常会更喜欢。

In some cases, a specific property may not be inheritable but you might still want it to be inherited from the parent element. This can be achieved by setting the value of that property to inherit for the child element:

在某些情况下，特定属性可能无法继承，但您仍可能希望从父元素继承该属性。 这可以通过将该属性的值设置为inherit子元素来实现：

.some-child {
  color: inherit;
}

Let’s say you want the color of all link elements on your website to be the same as the color defined on their parent element. There are a couple of ways to do this. You could use different classes for links and container elements with different colors, for example. However, one of the cleanest ways to do this is by using the inherit keyword.

假设您希望网站上所有链接元素的颜色与其父元素上定义的颜色相同。 有两种方法可以做到这一点。 例如，您可以对具有不同颜色的链接和容器元素使用不同的类。 但是，执行此操作的最干净的方法之一是使用inherit关键字。

Once the color property of the link elements is set to inherit, they will start inheriting the color of their parents:

一旦将link元素的color属性设置为inherit ，它们将开始继承其父级的颜色：

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

Here’s the demo:

这是演示：

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

请参见使用`inherit`关键字的Pen 强制 CodePen上的SitePoint ( @SitePoint ) 继承 。

使用CSS速记进行继承 (Inheritance Using CSS Shorthand)

A special feature of the inherit keyword is that when you apply it to a shorthand property it will apply to all sub-properties, even ones you may not realize at first are being forced to inherit. Also, with shorthand you can’t specify that a single sub-property will inherit a value.

inherit关键字的一个特殊功能是，将其应用于速记属性时，它将应用于所有子属性，即使您一开始可能没有意识到的子属性也被迫继承。 同样，用简写形式，您不能指定单个子属性将继承一个值。

As an example, you might expect the following CSS to apply a solid border of 1px width whose color is inherited from the parent element. However, the declaration is actually invalid:

例如，您可能希望以下CSS应用1px宽度的实线边框，其颜色是从父元素继承的。 但是，该声明实际上是无效的：

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

Similarly, you cannot use shorthand properties to set margins or padding to a specific value on one side and to an inherited value on the other side. This again will make the declaration invalid:

同样，您不能使用速记属性在一侧设置边距或填充为特定值，在另一侧设置为继承值。 这将再次使声明无效：

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

One solution to this problem is to set the property that you want to inherit to some arbitrary value and then use inherit with the corresponding longhand property:

解决此问题的一种方法是将要继承的属性设置为某个任意值，然后将inherit与相应的longhand属性一起使用：

.example {
  margin : 10px 0 20px 15px;
  margin-right: inherit;
}

缺少速记值 (Missing Shorthand Values)

When writing shorthand, any missing sub-property whose value has not been provided explicitly will be set to its initial (or default) value. Consider the following CSS:

编写速记时，任何未明确提供其值的缺失子属性将被设置为其初始(或默认)值。 考虑以下CSS：

.container-a {
  font: italic 1.2em/1.75 Lato;
}

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

Here, the paragraph text won’t inherit the value of font-style from its container. The font-style value will actually be reset to its initial value of normal. Therefore, in this case, if you want the parent font shorthand to be inherited while still making sure that the paragraph remains bold, you will have to use the longhand font-weight property.

在这里，段落文本不会从其容器继承font-style的值。 font-style值实际上将重置为normal初始值。 因此，在这种情况下，如果希望继承父font速记，同时又确保该段落保持bold ，则必须使用longhand font-weight属性。

See the Pen CSS Inheritance and Shorthand by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS继承和速记 。

使用DevTools查看继承的值 (Using DevTools to See Inherited Values)

DevTools can be used to view properties that an element inherits from its parent or from another element up the DOM tree. As already mentioned, not all properties of a parent element are inheritable. Neither do all the inheritable properties make it to the end of the inheritance chain without being overridden by another CSS rule somewhere else.

DevTools可用于查看元素从其父元素或DOM树中另一个元素继承的属性。 如前所述，并非父元素的所有属性都是可继承的。 没有被其他地方的另一个CSS规则覆盖，所有可继承属性都不会使其到达继承链的末尾。

DevTools gives you different visual cues to easily distinguish between all such properties, which you can see in the screenshot below, taken from SitePoint’s CSS:

DevTools提供了不同的视觉提示，可以轻松地区分所有这些属性，您可以在下面的屏幕快照中看到这些属性，这些属性取自SitePointCSS：

Any properties that are not inheritable by the selected element are dimmed. Properties that were inheritable but were overridden are displayed with strike-through text.

所选元素不可继承的所有属性都将变暗。 可以继承但被覆盖的属性以删除线文本显示。

继承CSS属性列表 (List of CSS Properties that are Inherited)

There doesn’t seem to be a single definitive source that lists all CSS properties that inherit, but below is a list that’s probably correct, based on a few sources:

似乎没有一个确定的来源列出所有继承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
  自动换行

There are also a number of speech-related CSS properties that are inherited and that are not included in the list above.

还有许多与语音相关CSS属性是继承的，没有包含在上面的列表中。

Here are a few sources for inherited property lists:

以下是继承的属性列表的一些来源：

• CSS2.2 Full Property Table

  CSS2.2完整属性表

• Which CSS properties are inherited? (Question on Stack Overflow)

  哪些CSS属性是继承的？ (有关堆栈溢出的问题)

You can also view info on an individual CSS property in the spec, or in any comprehensive CSS reference, and it will usually tell you if that property is inherited by default.

您还可以在规范或任何全面CSS参考中查看有关单个CSS属性的信息，它通常会告诉您该属性是否默认继承。

结论 (Conclusion)

To summarize what I’ve discussed: inheritance allows you to avoid writing duplicated CSS rules to apply the same set of properties to all the descendants of an element. It greatly simplifies the process of adding styles to web pages and therefore is an excellent feature of CSS.

总结一下我所讨论的内容：继承使您可以避免编写重复CSS规则，以将相同的属性集应用于元素的所有后代。 它极大地简化了向网页添加样式的过程，因此是CSS的出色功能。

CSS also allows you to use the inherit keyword to force inheritance on properties that are not inherited by default. DevTools provide you easy access to all the properties that an element inherits from its ancestors. This can help you in quickly figuring out solutions to common layout related problems.

CSS还允许您使用inherit关键字来强制继承默认情况下未继承的属性。 DevTools使您可以轻松访问元素从其祖先继承的所有属性。 这可以帮助您快速解决常见布局相关问题的解决方案。

翻译自: https://www.sitepoint.com/css-inheritance-introduction/

css 继承