属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。

渲染每个元素的前提条件：该元素的所有CSS属性必须有值。

一个元素，从所有属性都没值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。

实际举例

 <style>
    div {
        color: red;
    }
 </style>
 
  <div>
        <a href="">
            举个例子
        </a>
        <p>
            p元素
        </p>
    </div>
 
 

请问a 元素和p 元素的文字颜色都是什么？

下面是a元素的浏览器设置的样式

下面是p元素的浏览器设置的样式

我们发现a 元素浏览器设置的是有文字颜色的，而p元素是没有设置文字颜色的。

下面我们按照属性值的计算过程来分析上面的问题

1. 确定声明值，a元素本身浏览器有声明，我们确定a元素的颜色就是浏览器设置的蓝色 p元素没有声明值

2. 第二步解决冲突，a元素文字颜色值已经确定，后面的不会进行，对p元素没有声明值，也不进行第二步

3. 第三步 继承 P元素可以继承于父元素div的文字颜色，P元素确定文字文字颜色。

最终结论 a元素是浏览器默认的蓝色，而p元素是用的父元素的红色。

问题：我们如何才可以让a元素使用继承的颜色呢？ a元素现在的问题是走不到第三步使用继承，如何解决呢？我们可以使用下面的代码

a{
    color: inherit;
}

inherit 强制继承，不仅可以让本身可以继承的文字属性进行属性，也可以不可以继承的属性进行继承。

上面的代码为什么加上，a元素就可以变成红色了呢？他影响的哪一步呢？

我们再按照上面的属性值确定的步骤来分析一下

1. 确定声明值，a元素本身浏览器有声明，这里也有了作者样式，这一步确定不了
2. 第二步解决冲突，因为我们这里有了作者样式，所以开发者样式在层叠过程胜出。最终确定了a的元素是使用开发者设定的 inherit样式，但是这个样式从哪取值呢？这个inherit具体是取什么值呢？看父元素。

以上就确定了a的文字颜色。

特殊的两个CSS取值：

• inherit：手动（强制）继承，将父元素的值取出应用到该元素
• initial：初始值，将该属性设置为默认值