从属性值的计算过程解释a标签为什么不能继承父元素color属性

1. 属性值的计算过程

1. 渲染页面：渲染页面时是一个元素一个元素依次渲染的，按照页面文档的树形目录结构顺序（先序遍历）进行渲染

2. 如何渲染元素
   前提条件：该元素所有的css属性必须全部有值
   css属性值计算过程：一个元素从所有属性都没值，到所有属性都有值

3. css属性值计算过程：
   无属性值 -> 确定声明值 -> 层叠冲突 -> 使用继承 -> 使用默认值 -> 属性均有值

• 确定声明值：参考样式表（作者样式表、浏览器默认样式表）中没有冲突的声明，作为css属性
• 层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性
• 使用继承：对仍然没有值的属性，若可以继承，继承父元素的值
• 使用默认值：对仍然没有值的属性，使用默认值

2. 层叠（权重计算）

声明冲突：用一个样式，多次应用到同一个元素（一个元素的同一属性多次赋值的情况）
层叠（权重计算）：解决冲突的过程，浏览器自动处理

（1）比较重要性

重要性由高到低

• 作者样式表中的！important样式
• 作者样式表的普通样式
• 浏览器默认样式表

（2）比较特殊性

看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数

• 千位：内联样式，记1，否则为0
• 百位：等于选择器中所有id选择器的数量
• 十位：等于选择器所有类选择器，属性选择器，伪类选择器的数量
• 个位：等于选择器中所有元素选择器，伪类选择器的数量
  这里的四位数是256进1

（3）比较源次序

代码书写越靠后胜出

应用

• 重置样式表：书写一些作者样式表，覆盖浏览器的默认样式
• link > visited > hover > active

3. 继承

子元素会继承父元素的某些css属性（通常跟文字相关的属性都能被继承）

4. 解释为什么a标签的color属性不能继承父元素color属性值

    <div>
        <p>p标签</p>
        <a href="https://www.baidu.com">baidu</a>
    </div>

    div{
        color: #008c8c;
        font-weight: 600;
    }

由下图可知子元素p继承了父元素的color以及font-weight值，而a标签只继承的父元素的font-weight

（1）p元素
下面我们完整的分析一下p元素的属性值计算过程：

• 首先确定声明值，如图p的浏览器默认样式表没有冲突的样式，直接作为css属性如display等
• 层叠冲突，如图p元素并无层叠冲突
• 使用继承，父元素color和font-weight属性均可继承，所以p元素继承父元素的color和font-weight属性值
• 使用默认值，至此还没有值的css属性将使用默认值
  
  （2）a元素
  同上，分析a元素的属性值计算过程：
• 确定声明值，a元素浏览器默认样式表没有冲突的样式，直接作为css属性如color等，注意，此处a元素的浏览器默认样式color：-webkit-link;，此时a元素的color属性已经有值了，为浏览器默认样式的值，所以在第三步，是不会继承父元素的color属性
• 层叠冲突，此处a元素没有样式声明冲突
• 使用继承，color已有值，所以不用继承，此处a元素继承了父元素的font-weight属性
• 使用默认值，至此，仍然没有值的css属性使用默认值
  

总结：为什么a标签没有继承父元素的color属性，只有在该css属性可以继承并且属性值的计算过程中，在确定声明值和层叠冲突中仍然没有值，才会继承父元素的css属性值，而浏览器的默认样式表已经给a标签的color属性进行赋值（*即a标签在第一步确定声明值的过程中已经有值了），所以a标签不会继承父元素的color属性