CSS属性值的计算过程

CSS属性值的计算过程

• 一个元素一个元素的依次渲染，顺序按照页面结构的树形目录结构进行
• 渲染每个元素的前提：该元素的所有css属性必须都有值
• 一个元素，从所有属性都没有值，到都有值 的过程叫做属性值的计算过程
  过程：

1. 确定声明值（包括作者样式表，就是自己写的，还有浏览器默认样式表）
   这一步会参考样式表中没有冲突的声明作为css属性值
2. 层叠冲突
   第一步有冲突的声明，会使用层叠规则确定css属性值

   1. 比较重要性
      重要性从高到低：
      作者样式表(我们自己写的)中的! importment(不推荐使用)>作者样式表中的普通样式(不加! importment)>浏览器中的默认样式

   2. 比较特殊性（比较权重）.
      ID选择器:100
      类选择器或伪类选择器：10
      元素选择器或属性选择器或伪元素选择器：1
      通配符选择器*:0

   3. 比较源次序
      当权重一样时，后面写的会把前面的覆盖掉

3. 继承
   对还没有值的属性，若该属性可以被继承，则继承父元素的
4. 使用默认值
   对还没有值的属性会使用默认值，如background-color这个属性就不可以被继承，如果前三部都没有确定background-color的属性值就会使用默认值，他的默认值是透明色
   例子

.demo{
      color: red;
     }
<div class="demo">
        <a href="">demo</a>
</div>

那么demo的颜色是什么?
分析过程

1. 确定声明值
   我们自己没有对元素设置color属性，a元素有浏览器默认样式表color: -webkit-link，那么根据规则a元素的color属性值就会为webkit-link
   那么第二步层叠冲突，第三部继承，还有第四步就不会执行了，因为第一步a元素的color属性就有值了，就不会继承父元素div的属性值了

如果想要a元素继承父元素的颜色值的话，可以设置

<style>
	a{
		color:inherit
	}
</style>

分析：此时第一步确定声明值就会产生冲突，进入第二步层叠冲突，那么根据规则color的属性值就会是继承父元素的值，根据渲染顺序，此时父元素已经渲染出来，就会从父元素中直接获取color的值,此时是强制继承，第三步的继承就不会发生了