了解 CSS 继承（继承、初始、取消设置和还原）

html 中存在关系，这些关系使我们能够选择和设置网页元素的样式。当一个 HTML 元素嵌套在另一个元素中时，外部元素称为parent，而内部元素称为child。

<div>
    <h>Heading</h>
    <span>I am a span</span>
    <p>This is a paragraph</p>
    </div>

子元素本身可以成为另一个元素的父元素。

为什么所有这些序言和背景故事？因为它很重要！

当您为父元素设置样式时，在某些情况下，该样式将被其子元素继承。我说一些情况是因为这种继承并不总是成立。

css 继承的重要性

如果您曾经为网页内容设置样式，很可能您没有为必须显示文本的每个元素编写字体样式。您可能只将字体样式添加到 body 元素，例如：

<body>
    <div>
    <h2>A h2 element</h2>
    <p>A paragraph</p>
    <div>
    <p>Another paragraph</p>
    </div>
    </div>
    <div>
    <h3>A h3 element</h3>
    </div>
    </body>

如果您想要所有这些内容的统一字体样式，您只需设置 body 元素的样式：

body {font-family: Arial, Helvetica, sans-serif;}

这是可能的，因为跨 HTML 元素的继承。这很有帮助，因为我们不必 font为 div 和标题重复相同的样式。这同样适用于 color样式，当应用于父元素时，它将应用于该父元素的子元素，除非将不同的color样式应用于子元素。

虽然继承对我们来说很容易，但如果所有 CSS 属性都以这种方式运行，事情就不会那么容易了。

这是另一个例子：

<ul class="main-list">
    <li>Dairy</li>
    <li>Vegetable</li>
    <li class="sub-list">
    Fruit
    <ul>
    <li>
    Drupe
    <ul>
    <li>Peach</li>
    <li>Coconut</li>
    <li>Olive
    </ul>
    </li>
    <li>
    Berry
    <ul>
    <li>Tomato</li>
    <li>Cucumber</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

谁知道黄瓜是浆果？！我们将在父列表中实现一些样式，并查看继承的内容：

See the Pen Inheritance example: what gets inherited? by Envato Tuts+ (@tutsplus) on CodePen.

应用于无序列表的font和color样式由其子元素甚至其孙元素继承。border但是，样式并非如此。

那么还有哪些其他属性是继承的呢？

继承属性的完整列表

根据 W3C，以下是可以继承的属性。

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

您可以在W3C 的网站上找到有关此列表的更多信息（您绝对不需要记住所有这些！）。

如何强制属性继承

由于某些属性不能被继承，您可能会认为出路是将它们也应用于子元素。我们上面使用的样式可能如下所示：

.main-list {
    border: 1rem solid #000;
    color: red;
    font-family: Verdana
    }

    .sub-list {
    border: 1rem solid #000;
    }

我们仍然只在父列表和第一个子列表上有边框样式。但问题是我们不得不重复自己。一遍又一遍地复制相同风格的痛苦变得显而易见。

一个好的解决方案是您只需要应用一次样式，最好是在父级上，然后对子级进行一些调整以继承。这将保持一切干燥和清洁。

继承关键字

根据 MDN 文档：

“ inherit CSS 关键字导致指定它的元素从其父元素获取属性的计算属性。” ——MDN _

换句话说，它是一种声明特定属性的值应该从元素的父级获取的方式。此关键字可用于任何CSS 属性。

回到我们的示例，样式如下所示：

.main-list {
    border: 1rem solid #000;
    color: red;
    font-family: Verdana;
    }

    .sub-list {
    border: inherit;
    }

这样，结果将如下所示：

See the Pen Inheritance: an example of the `inherit` keyword by Envato Tuts+ (@tutsplus) on CodePen.

所以，如果我们的边框样式需要改变，我们只需要在一个地方改变它们。

如何强制属性不继承

虽然可以对默认情况下不可继承的属性强制继承，但在某些情况下，不这样做可能是有意义的。另一种方法是使用属性的初始值。

初始关键字

您可以使用initialCSS 关键字设置 CSS 属性的默认值或初始值。这将导致属性的继承值返回到其初始值。

在这个例子中，发生了几件事。我们有两个div元素，其红色属性由嵌套在其中的h1and元素继承。p但是，我们也应用了全局h1样式（蓝色），但我们确保第二个 h1不会以下列方式继承任何一种样式：

h1 {
    color: blue;
    }

    div {
    border: 1rem solid #000;
    color: red;
    font-family: Verdana;
    margin-bottom: 10px;
    }

    .berries h1 {
    color: initial;
    }

我们h1的.berries块可以追溯到浏览器最初应用的任何颜色。看起来是这样的：

See the Pen Inheritance: the initial keyword by Envato Tuts+ (@tutsplus) on CodePen.

其他 CSS 继承关键字

除了inheritandinitial关键字，我们还可以使用revertand unset。事实上，这些替代方案实际上是被推荐的，因为initial它们会产生一些意想不到的结果。

未设置的关键字

unset 关键字略有不同。它将元素的值重置为继承的值（如果它继承了），如果不是，则重置为其初始值。这是我们的例子：

h1 {
    color: blue;
    }
    div {
    border: 1rem solid #000;
    color: red;
    font-family: Verdana;
    margin-bottom: 10px;
    }
    .berries h1 {
    color: unset;
    }

在这种情况下，color我们第二个的属性h1恢复到它的继承值（红色）而不是它的初始值（黑色）：

See the Pen Inheritance: the Unset keyword by Envato Tuts+ (@tutsplus) on CodePen.