在日常编程中你是否遇到了这样的问题？
例子
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container">
<a href="">我能改变颜色吗</a>
<p>我能改变颜色吗</p>
</div>
</body>
</html>
思考一下这段代码运行后的，a标签和p标签的文字颜色分别是什么？
结果是：
结果为什么是这样呢？ 因为这涉及到了属性值的计算过程。
简单来说一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程。
属性计算过程他分为四个步骤，分别是：确定声明值、层叠冲突、使用继承、使用默认值。
第一步（确定声明值）
参考样式表（作者样式表和浏览器默认样式表）中没有冲突的声明，作为CSS属性值。
冲突声明就是表示如果一个样式表里面出现了两个或者更多的同类型的css样式规则，这个就是冲突声明。
可以看到，没有冲突的 css 样式有
colordisplayfont-weight。
所以这一步得到确定的最终样式：
第二步（层叠冲突）
对样式表有冲突的声明使用层叠规则，确定css属性值，这里面有细分为三步。
1、比较重要性：作者样式表覆盖浏览器默认样式表，经过这一步，浏览器的默认样式就要被淘汰，作者样式表重要性要高于浏览器样式表。 这一步能够解释：为什么选择器权重低的作者样式
* { margin: 0 padding: 0 }，会覆盖浏览器默认的body样式。 2、比较特殊性：简单来说就是比较权重（选择器优先级）。
3、比较源次序：靠后的代码覆盖，靠前的代码。
第三步（使用继承）
对仍然没有属性值的元素，若是可继承属性，则继承父元素的属性值。
经过这一步可以看到text-align被继承过来了:
第四步（使用默认值）
到了这一步，对仍然没有值的属性，就会使用默认值。
到了这一步就会采用background-color的默认值transparent:
根据这些知识我们就可以得出开头那段代码p元素是怎么回事：
第一步确定声明值，因为作者样式表和浏览器默认样式表里面都没有给他设置color这个属性，所以这一步不确定，进入下一步。 第二步层叠冲突，因为都没有设置这个属性，所以不存在冲突，这一步也确定不了，进入下一步。 第三步使用继承，到了这一步还是没有值，所以继承父元素的颜色。 第四步使用默认值，因为第三步已经确定了属性值，所以第四步没必要了。
根据这些知识我们就可以得出开头那段代码a元素是怎么回事：
第一步，确实声明值，container是作者样式表，但是他是针对a元素的父元素写的，我们只看针对a元素的样式表，所以直接确定浏览器默认的样式表，剩下的二三四步都不需要看了。
