Web 基础知识：CSS - 继承和层次结构CSS 是一个非常健壮的系统，必须遵循多个不同的自定义维度。为此，它提供了许

本文是系列文章的一部分：Web 基础知识

CSS 是一个非常健壮的系统，必须遵循多个不同的自定义维度。为此，它提供了许多机制，允许开发人员使用继承来减少代码量并同时影响多个元素。

了解继承和 CSS 结构将帮助您开发更优化的样式表并避免规则出现不必要的行为。

属性继承

CSS 中的属性并非都是平等的，并且哪些属性可以传递给子元素是有特定性的。

可继承属性

CSS 本身并没有继承很多属性，所以我们可以把它们全部列出来！下表列出了所有默认可继承的属性。

属性	细节
`color`	文本的颜色。
`font-family`	用于文本的字体类型。
`font-size`	文本的大小。
`font-style`	文本是正常、斜体还是倾斜的。
`font-variant`	控制小型大写字母的样式。
`font-weight`	文字的粗体。
`font-stretch`	允许水平拉伸或压缩字体。
`letter-spacing`	字符之间的间距。
`line-height`	文本中行的高度。
`text-align`	容器内的文本水平对齐。
`text-indent`	文本块第一行的缩进。
`text-transform`	控制大写字母（例如大写字母、小写字母）。
`text-shadow`	应用于文本的阴影效果。
`word-spacing`	单词之间的间距。
`direction`	文本方向（从左到右或从右到左）。
`unicode-bidi`	控制双向文本的嵌入级别。

属性	细节
`visibility`	元素是否可见或隐藏。
`cursor`	悬停在元素上时显示的光标类型。

属性	细节
`list-style`	设置`list-style-type`、`list-style-image`和`list-style-position`列表的简写。
`list-style-type`	列表项的标记类型（例如项目符号、数字）。
`list-style-image`	用作列表标记的图像。
`list-style-position`	列表标记的位置（列表内部或外部）。

不可继承的属性

当然，这些包括除了我们刚刚看到的属性之外的所有其他属性。

这是合理的，因为每个元素通常都应该控制自己的盒模型和布局。例如，如果父元素有一个margin，那么它的子元素自动继承相同的外边距就是没有意义的，因为这可能会导致布局问题。

强制继承

inherit您可以通过使用任何属性的值强制将属性传递给子元素。

<body>    <div>        <p>Inheriting from body</p>.    <div></body>

body {    padding: 24px;}div {    padding: inherit;    }

阻止继承

我们还可以通过覆盖来阻止子元素继承属性值initial。这会将属性值设置为其默认值。

删除覆盖`unset`

如果属性可继承，则可以使用 unset 关键字将属性重置为其继承值；如果属性不可继承，则可以使用 unset 关键字将属性重置为其初始值。

body {color: blue;}    p { color: red; }    span { color: unset; }

<body>    <p>This is red, yet <span>this is blue</span></p></body>

CSS 级联

CSS 级联是样式应用于网页的最重要方面之一。当多个规则应用于同一元素时，它决定哪些规则优先生效。

要理解级联，需要牢记四个重要概念：

来源： 样式的来源。
特异性： 针对元素时规则的具体程度。
顺序： 样式出现的顺序。
重要性： 规则是否被标记为!important。

在本文中，我们将从来源开始详细讨论每一个问题。

来源

CSS 的应用方式多种多样，每种方式都有各自的用途。

用户代理样式表

用户代理样式表是浏览器提供的默认样式。这些样式表可能差异很大，并且根据浏览器的底层引擎，可能会导致完全不同的外观和感觉。这就是为什么许多开发人员使用诸如NormalizeCSS之类的工具来保持跨浏览器的简洁样式。

作者样式表

“作者”样式表指的是网站使用的样式表。这些样式表由开发者编写，以便浏览器使用它们来显示自定义样式。

作者样式表优先于用户代理样式表，因为它们应用于浏览器的默认样式之上。

特异性

当多个规则应用于同一元素时，浏览器会计算具体性来确定应用哪条规则。选择器越具体，其优先级就越高。

元素选择器： 针对 HTML 标签的选择器，例如<p>、、等<div>。<aside>
类选择器： 自定义类的选择器，即.myclass。
ID 选择器： 每个元素的 ID 都是唯一的，这意味着它们在定义特殊性时具有最高优先级。
内联样式： 直接应用于 HTML 元素的样式将优先于其他所有样式。

让我们看下面的例子；我们将创建一个<div>，并应用一个自定义类 - 称为.myDiv，以及id一个custom-div。

<div class="myDiv" id="custom-div">An example of a custom div</div>

div {    background-color: red;}#custom-div {    background-color: blue;}.myDiv {    background-color: green;}

了解了我们所知道的，我们的将会是什么颜色div？

内联样式

就特殊性而言，内联样式将具有最高优先级，覆盖作者样式表中的 CSS。

让我们看同样的例子，但这一次，我们还将对我们的应用内联样式<div>。

<div class="myDiv" id="custom-div" style="background-color: red;">An example of a custom div</div>

div {    background-color: purple;}.myDiv {    background-color: green;}#custom-div {    background-color: blue;}

在这种情况下，由于我们在 HTML 中应用了内联样式，我们的 CSS 被完全覆盖了。因此，我们的颜色<div>是红色的！

命令

当在两个具有相同特殊性级别的规则之间进行选择时，浏览器将始终优先考虑最后应用的样式。

.myDiv {    background-color: red;}.myDiv {    background-color: blue;}.myDiv {    background-color: green;    /* This is the last style,    so our <div> will be green! */}

重要性

这个很简单。 !important重要性指的是属性末尾是否包含一个附加项。

本质上，!important它告诉浏览器具有该属性的属性必须优先于其他属性。

.myDiv {    background-color: blue !important;   }
.myDiv {    background-color: red;}

在几乎所有情况下，关键字!important都会忽略特异性的层次结构，这意味着，即使应用于低于现有规则的特异性级别，它仍然会优先！

.myDiv {    background-color: blue !important;    }
#custom-div {    background-color: red;    }

当存在两个相同的!important规则时，顺序将决定应用哪一个规则。

.myDiv {    background-color: red !important;}
.myDiv {    background-color: blue !important;}

重要性和特殊性

在某些情况下!important，特异性很重要。例如，当多个!important后缀应用于同一元素时，其特异性级别不同。

.myDiv {    background-color: green !important;}
div {    background-color: blue !important;}
#custom-div {    background-color: red;}

根据我们所了解的所有信息，<div>这次我们的颜色会是什么颜色？

下一步是什么？

现在我们已经掌握了 CSS 及其强大的机制，是时候通过构建一些东西来测试它了！下一章，我们将讨论 Flexbox，这是一个允许我们在 Web 上构建响应式组件的工具集！

Web 基础知识：CSS - 继承和层次结构