这是我参与「第四届青训营 」笔记创作活动的的第2天。
（萌新初来乍到，笔记如有错误，请联系：1500870019@qq.com）
昨天刚学习完CSS，个人觉得课上老师讲的内容跨度比较大，适合拿来复习，建议大家以后的课程都去预习一下，这样可以很大程度提高课堂效率。现在，我以一个学完之后来复习的角度给大家总结一下老师昨天所讲的一些重难点。
CSS工作原理
- 解析
如上图所示，浏览器加载HTML后，对HTML进行解析，该过程中加载CSS（如果检测到有相应格式的CSS语言的话），并对CSS样式进行解析，HTML解析完成后生成DOM树，接着将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示出来。
- DOM树
DOM是一个树形结构，在HTML中的每一个元素，属性，甚至文本都可以被转换为DOM中的一个节点。每个节点在节点树中都有对应的关系节点(比如父节点，兄弟节点)。
- 渲染
根据html文件构造DOM树根据css文件构造CSSOM树。构建树期间，如果遇到JS，则阻塞DOM树和CSSOM树的构建，优先加载JS文件，加载完毕后再继续构建DOM树和CSSOM 树。(JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。)HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。
选择器优先级
选择器的优先级是一个很重要的规则。
MDN对优先级的定义：浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
具体的浏览器中选择器的优先级算法(《CSS REFACTORING》 中提到)：
A specificity is determined by plugging numbers into (a, b, c, d):
- If the styles are applied via the style attribute, a=1; otherwise, a=0.
- b is equal to the number of ID selectors present.
- c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
- d is equal to the number of type selectors and pseudoelements present.
一般来说是:
内联>id选择器>类选择器>标签选择器
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
- 如果存在内联样式，那么
A = 1, 否则A = 0; B的值等于ID选择器出现的次数;C的值等于类选择器和属性选择器和伪类出现的总次数;D的值等于标签选择器和伪元素出现的总次数 。
覆盖与继承
提起优先级，就不得不提起一个问题：覆盖与继承。
覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的这个原则。
继承：当样式属性没有设置且可以继承的时候，该属性会自动继承父元素中的样式属性计算值，需要注意的是这里继承的是样式的计算值，而不继承相对值。也可以使用inherit属性值来进行显式继承。
初始值：属性的默认初始值，CSS中的每个属性都有一个初始值。
下面是属性计算值的计算过程
好啦，今天的分享就先讲到这里，大家用的时候有忘记的标签要自行上W3School上查阅噢！
