层叠的规则是什么，属性值的计算过程又是怎样的

什么是层叠

当我们用 CSS 给一个元素通过不同的方法添加了相同的属性时，那么浏览器该怎么渲染这个元素的样式呢，这就是层叠要做的事

重要性

使用了 !important 的的属性的重要性 > 普通样式 > 浏览器默认样式

优先级（特殊性）

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的每一种选择器类型的数值决定。

选择符的优先级由选择符本身的组成部分决定，一个优先级由四部分构成 0, 0, 0, 0

1. 行间样式的优先级为 1, 0, 0, 0
2. id 选择器的优先级为 0, 1, 0, 0
3. class、属性、伪类选择器的优先级为 0, 0, 1, 0
4. 标签、伪元素选择器的优先级为 0, 0, 0, 1
5. * 通配符选择器的优先级为 0, 0, 0, 0
6. :not() 对优先级没有影响，但是，在 :not()内部声明的选择器会影响优先级

同样的样式优先级高的一定会覆盖低的，对于优先级相同的后写的会覆盖先写的。
但是如果出现了 !important 情况就不一样了，带有 !important 的样式对优先级没有影响，但是浏览器会把重要的和不重要的样式分开来处理。
也就是说，所有带有 !important 的样式会放在一起，普通的样式放在一起；如果重要的和不重要的冲突肯定是按重要性来比使用重要的；如果重要的和重要的发生冲突也是用优先级来解决问题。

<style>
      div {
          width: 100px;
          height: 100px;
          background-color: lightblue!important;
      }
  </style>
<div style="background-color: skyblue!important;"></div>

依据规则，很容易就可以判断出 div 的颜色是 skyblue

在 vscode 中我们可以很清楚的看出我们选择的元素的优先级

继承

CSS的很多属性是可以继承的，即我们给某个元素的父级设置属性值，它也会自动应用该样式，这就是继承。
对于 非继承属性我们可以通过 inherit 关键字强行继承

属性值的计算过程

浏览器渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
计算过程：

1. 确定声明值
   将作者样式表和浏览器默认样式表中没有冲突的样式，作为css的属性值
2. 层叠冲突
   对样式表有冲突的声明使用层叠规则，确定CSS属性值
3. 使用继承
   对仍然没有值的属性，若可以继承，则继承父元素的值
4. 使用默认值
   每个 CSS 属性都有默认值，最后对仍然没有值的属性，使用默认值

这就可以解释为什么 a 元素不能继承父级的颜色等相关问题了，因为浏览器给 a 元素设置了默认样式。