我们要计算属性值，那么我们就先要知道网页在浏览器中大致的渲染过程。
一个网页在浏览器中是按照树形结构渲染，需要先将一条线上的渲染完成才会去渲染下一个。（每个元素的渲染前提就是CSS声明必须都有属性值）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOM树</title></head><body><a href=""></a><p><h1></h1><a href=""></a><span><i></i></span></p><img src="" alt=""><div></div></body></html>
DOM树的结构：
html是根节点（然后它下面有两个节点）
head节点和body节点（他们中又包含这他们里面的标签）
我们拿head节点举例，它下面有meta节点和title节点，而按照代码从上到下的顺序，树的左边节点一条线就有html到head到meta
树的执行就是一条线要全部执行完才会去执行另外一条，并且是从左到右执行。
属性值的计算：（有四步）
1.确定声明值：
我们需要知道就算不给元素写样式，但是你看到的元素也是由样式的，那是因为当我们没有写样式的时候浏览器会给样式给元素。
而确定声明值也就是没有样式冲突属性值，如：
a:-webkit-any-link {color: -webkit-link;cursor: pointer;text-decoration: underline;}
当我们没有给a元素声明这些值时，它就会使用浏览器赋给它的值，和没有冲突的值。
2.层叠冲突：
前面的确定声明值是给没有声明冲突的声明赋值，而有冲突的就需要在第二步判断哪个声明值是最终会赋给它的，如：
p{color: #008282;}div p{color: #f40;}div p.p{color: #abcdef;}#div p .p{color: #000;}
我们首先需要判断重要性：
重要性依次为：
1.如果在样式中有!important那么在样式的选择中，会优先选择它（默认为最高级）
2.然后就是作者样式（程序员样式）
在程序员样式中：内联样式的优先级最高，然后就是内部样式和外部样式（它们需要看在程序中的先后顺序，按照就近原则）
3.最后就是浏览器赋予元素的样式
如果在重要性一致的情况下，那么就会比较选择器的权重值：
内联样式（A）>id选择器(B)>类、伪类、属性选择器©>元素、伪元素选择器(D)
而浏览器内部会生成一个四位数（不是十进制数，大约是二百多才会进一位）
A占千位，B占百位，C占十位，D占个位
如上代码的权重值依次为0001、0002、0012、0111
所以我们可以比较出0111最大，所以我们的color:为#000；
如果在权重值相同的情况下，我们会按照就近原则选择元素的属性值，如：
#div p .p{color: #000;color:#fff;}
那么我们这个时候就会选择color值为#fff;
3.使用继承：
经过上面两步，如果还是没有属性值，那么回去找包含元素（父元素），继承可以继承的属性值（一般情况下都是和文本相关的属性值才可以被继承）
当然有两个特殊的属性值：inherit（强制继承）
如：
div{width: 980px;background-color: #2C90CF;}div span{width:inherit;background-color:inherit;}
span元素本来是不可以继承width和background-color的属性值的，但是使用inherit就会强制继承
而如果你不想继承也可以用initial（恢复初始值）也就是可以不让它继承父元素的属性值
4.使用默认值（CSS赋予元素的）
页面需要渲染的前提条件就是，使用元素的属性必须都有值。
使用最后一步就是将到现在还没有值的属性赋值，然后完成渲染。
如果觉得《CSS层叠样式属性值的计算》对你有帮助，请点赞、收藏，并留下你的观点哦！
