什么是层叠？

层叠是 CSS 中的“C”，因此它处于 CSS 的核心位置。层叠算法决定了应用于页面元素的样式属性。

这一决定基于继承、特异性、重要性以及规则顺序。
层叠还确保了不会出现冲突。当我们为同一个元素的同一属性设置了多个 CSS 规则时，层叠机制会决定最终应用哪一条规则。

因此，在理解层叠的基础上，我们来逐一了解它做出这些决策所遵循的规则，首先从继承开始。

继承

CSS 的 继承 是在属性层面起作用的。当我们为某个选择器设置 CSS 属性时，这些属性要么被其所有子元素继承，要么不被继承？这取决于具体的属性。有些属性显然可以继承，而另一些则不能。

在处理字体时，我们无需为页面上的每个元素都单独设置 font-family 或 font-size 样式。只需在 body 标签上设置一次，所有子元素都会自动继承这些样式。

继承使我们的 CSS 编写更加简洁，减少了重复代码。因此，我们不必在每个子元素中显式地设置每一个属性。

强制继承

如果某个属性默认不可继承，我们可以强制其子元素继承该属性。在子选择器中，将该属性设置为 inherit。

例如：

1body {
2   background-color: red;
3}
4p {
5   background-color: inherit;
6}

我们的网页 <body> 被赋予了红色背景。通常情况下，其他元素不会继承背景属性。通过使用 background-color: inherit，我们强制让 <p> 元素继承该背景。

避免继承

反过来也是可行的。使用 revert 关键字，可以将属性值回滚为浏览器（用户代理）样式表中定义的默认值，就好像我们从未为它设置过样式一样。

例如：

1body {
2   background-color: red;
3}
4p {
5   background-color: revert;
6}

在这里，借助 background-color: revert，我们的 <p> 元素恢复到其默认状态。

示例

initial 和 unset 关键字

我们还可以使用 initial 和 unset 关键字。

initial 关键字将 CSS 属性值设置为其规范中定义的默认值。

unset 关键字则根据属性是否可继承来决定：如果该属性可继承，则使用其继承值；如果不可继承，则使用其初始值。

示例