CSS层叠样式表的层叠是什么意思(自我理解)

当同一个HTML元素被多个CSS规则应用时，这些规则中一些CSS属性有可能发生冲突，此时就需要经过“层叠”的处理来确定最终的输出值。CSS层叠样式表中的“层叠”指的就是这个过程。

层叠的过程通常从上往下进行，如果两个同级的CSS规则具有相同的优先级，那么后面声明的规则将覆盖先前声明的规则。如果两个CSS规则的优先级不同，那么优先级高的规则将会覆盖优先级低的规则。

例如，下面的HTML代码中有两个CSS规则同时应用于h1元素：

<h1 class="title">Hello World</h1>

.title {
  color: red;
}

h1 {
  color: blue;
}

由于后面声明的h1规则优先级高于先前声明的.title规则，因此最终样式中color属性的值将会是蓝色的。结果输出为：Hello World(蓝色)。

另外，CSS层叠样式表中还存在着重要性的概念，重要性高的CSS规则无论优先级如何，都将覆盖优先级低的规则。我们可以使用!important关键字来将一个CSS规则标记为重要。

例如，下面的代码中，当.title类和color: green !important声明同时应用于h1元素时，color: green !important声明将会覆盖其他所有规则：

h1 {
  color: blue;
}

.title {
  color: red !important;
}

h1 {
  color: green !important;
}

最终样式中color属性的值将会是绿色的。结果输出为：Hello World(绿色)。