主线程遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。
通过前面生成的DOM 树和 CSSOM 树，遍历 DOM 树，为每一个 DOM 节点，计算它的所有 CSS 属性，最后会得到一棵带有样式的 DOM 树--也叫“渲染树 Render Tree”
可在控制台查看样式计算
属性值的计算过程
1、确定声明值
声明值就是 “自己所书写的 CSS 样式+浏览器内置的样式表” 相加得到全部的声明值，并且将部分值进行转换
如：color: red;转换为`color: rgb(255, 0, 0);
font-size: 2em;转换为font-size: 14px;`。
2、层叠冲突
在确定声明值时，声明的样式规则发生了冲突，解决冲突，下面这三个步骤：
（一）比较源的重要性
样式有三种来源：
1. 浏览器默认样式（用户代理样式）：浏览器会有一个基本的样式表来给任何网页设置默认样式 2. 网页设计者定义的样式（页面作者样式）：即外联样式、内部样式、style行内样式等 3. 控制台调试样式（用户样式）：浏览器的用户在开发者模式里使用自定义样式表定制使用体验
对应的重要性顺序依次为：网页设计者定义的样式 > 用户样式 > 浏览器默认样式
（二）比较优先级--权重
如果在同一源中出现了样式声明冲突，则比较其优先级。
权重的等级
!important，权重最大，会覆盖页面内任何位置定义的元素样式。 内联样式，写在标签中的，权重为1000 ID选择器，权重为0100 类、伪类、属性选择器，权重为0010 标签、伪元素选择器，权重为0001 通配符、子选择器、相邻选择器等，权重为0000
我手写了计算权重的方法：
案例1
<ul id="nav" class="nav">
<li class="active" id="bb"><a href=""></a></li>
</ul>
ul#nav li.active a 权值为（0,1,1,3）；
`ul li.active a` 权值为（0,0,1,3）；---一个伪类，三个标签
`ul.nav li.active a` 的权值为（0,0,2,3）；
`
如是行内样式（内联样式），权值为（1,0,0,0） ；
某项 CSS 属性后面带 `!important` 时，权值最大。
案例2
都是设置文字颜色，应该以哪个为主？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 权重 0,0,1,1 */
.nav a {
color: red;
}
/* 权重 0,0,1,0 */
.blog {
color: yellow;
}
/* 权重 0,0,2,0 */
.nav .blog {
color: blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="" class="blog">java</a>
<a href="">python</a>
<a href="">css</a>
<a href="">ruby</a>
</div>
</body>
</html>
分析：
0011>0010 以红色为主
0020>0011 以蓝色为主
案例3
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a{color: yellow;} /*权重：0,0,0,1*/
div a{color: green;} /*权重：0,0,0,2*/
.demo a{color: black;} /*权重：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*权重：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*权重：0,0,2,0*/
#d1 a{color: orange;} /*权重：0,1,0,1*/
div#d1 a{color: red;} /*权重：0,1,0,2*/
</style>
</head>
<body>
<a href="">第一</a>
<div class="demo">
<input type="text" value="第二" />
<a href="">第三</a>
</div>
<div id="d1">
<a href="">第四</a>
</div>
</body>
</html>
分析：
#d1 a和div#d1 a 设置相同的属性，但0101<0102 以红色为主
（三）比较次序----重要：如权重值相同，“就近原则”
后声明的样式会覆盖先声明的样式。
p{
/* 会被覆盖 */
color: yellow;
}
p{
color: green;
}
3、使用继承
对于每一个 DOM 节点，都会去计算它的所有 CSS 属性。
对于未声明的属性，并不是直接使用默认值，而是使用继承值。
<div>
<p>java</p>
</div>
div{
color: red;
}
这里<p>标签会继承来自<div>的color: red样式。
继承原则：
- 就近原则，谁近就继承谁的，与权重无关。
- 大部分字体相关的属性都是可继承的
4、使用默认值
如果最后仍不能确定属性值，则使用浏览器默认值。
我的csdn博客原创地址 blog.csdn.net/huazi99/art…
