css属性值的计算过程

渲染每个元素的前提条件：该元素的所有CSS属性必须有值
而一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
参考：https://ke.qq.com/course/414780?taid=3622693245441084

属性值的计算过程

1. 确定声明值：先把作者样式表和浏览器默认样式表中没有冲突的声明，作为css的属性值

2. 层叠冲突：比较重要性，比较特殊性（权重），比较源次序

• 重要性： 作者 > 浏览器
• 特殊性（权重）： !important > 内联样式 > id > (class,属性选择器、伪类选择器) > 元素选择器 > 通配符 *
• 源次序：权重相同的情况下，靠后的胜出

3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值

4. 使用默认值：对仍然没有值的属性，使用默认值

思考：为什么 a 元素的颜色值不继承父元素

<style>
  div {
    color: red
  }
<style>
<div>
  <a href="#">lorem</a>   // 因为a元素浏览器有默认值，所以不会继承
</div>

那么如何让 a 的颜色值继承父元素呢，使用 
a {
  color: inherit   // 浏览器默认样式表有值，不会走继承，所以要在层叠冲突中覆盖浏览器默认样式表
}

image.png