这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
CSS 中的层叠、优先级和继承决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。在某些时候，我们在做一个项目过程中会发现一些应该产生效果的样式没有生效，通常的原因是你创建了两个应用于同一个元素的规则，而设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。
层叠
是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。简单地说，就是 CSS 规则的顺序。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。有三个因素需要考虑，根据重要性排序（递增）如下：
- 资源顺序 - 如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。
- 优先级 - 决定在发生冲突的时候应该使用哪条规则。例如有些规则在最后出现，但是却应用了前面的具有冲突的规则，这是因为前面的有更高的优先级——它范围更小。
- 重要程度 - 特殊的 CSS 规则 !important，用于修改特定属性的值，能够覆盖普通规则的层叠。
大多数 @规则的 CSS 声明是参与层叠计算的，比如包含于 @media、@documents 或者@supports 的 CSS 声明，但是包含于 @keyframes 和 @font-face 的声明不参与计算，因为它们是作为一个整体参与层叠算法的筛选。另外，@import 和 @charset 遵循特定的算法，不受层叠算法影响。
还可以使用 CSS @规则 中的 @layer 声明一个级联层，同一层内的规则将级联在一起，优先级的顺序由声明层的顺序来决定，这给予了开发者对层叠机制的更多控制。
优先级
优先级是基于不同种类选择器组成的匹配规则。浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。
- 如果一个元素选择器不是很具体，例如选择页面上该类型的所有元素（或伪元素），则它的优先级就会低一些。
- 如果一个类选择器稍微具体点，例如选择该页面中有特定 class 属性值（或其他属性选择器）的元素，则它的优先级就要高一点。
- 如果一个类选择器更具体点，例如选择该页面中有特定 id 属性值的元素，则它的优先级就要更高一点。
- 给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。
- 当在一个样式声明中使用一个 !important 规则时，将覆盖任何其他声明，与优先级无关。
