浏览器工作原理，动手码一个简易浏览器（2）：CSS计算

1. 本节代码

本节代码，git仓库地址

2. CSS计算

2.1 收集CSS规则

1. 遇到style结束标签时，将css规则保存起来
2. 调用CSS Parser来分析CSS规则
3. rule结构
   

//安装CSS Parser依赖
npm install css

2.2 添加调用

1. 创建一个元素后，立即计算CSS
2. (假设)理论上，当我们分析一个元素时，所有的CSS规则已经收集完毕
3. 在真实的浏览器中，可能遇到写在body的style标签，需要重新CSS计算的情况在简易浏览器的实现中忽略

2.3 获取父元素序列

1. 在computeCSS函数中，必须知道所有的父元素才能判断元素与规则是否匹配
2. 从上一步骤的stack，可以获取本元素所有的父元素
3. 因为首先获取的是“当前元素”，所以我们获得和计算父元素匹配的顺序是从内向外的

2.4 选择器与元素的匹配

1. 选择器也要从当前元素向外排列
2. 复杂选择器拆成针对单个元素的选择器，用循环匹配父元素队列
3. 实现computeCss函数

2.5 计算选择器与元素的匹配

1. 根据选择器的类型和元素属性，计算是否和当前元素匹配
2. 代码仅实现了三种基本的选择器（id，class，tag），实际浏览器中要处理符合选择器
3. 实现match函数
   

2.6 生成computed属性

一旦选择匹配，就应用选择器到元素上，形成computedStyle

2.7 specificity的计算逻辑

1. specificity特指的意思，比如元素的id特指某个元素，所以id选择器优先级高于其他选择器
2. CSS规则根据specificity和后来优先规则覆盖
3. specificity是个四元组，越左边权重越高
4. 一个CSS规则的specificity根据包含的简单选择器相加而成