文章目录
1. 属性值的计算
1.1 定义
网页在渲染的时候，元素的所有 css 属性必须有值，这样才能保证整个网页正常实现。
而一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。
1.2 样式的来源
相同选择器、不同选择器选择同一元素，会发生样式的冲突，即层叠冲突。但实际上，层叠规则还包含一个很重要的层面：样式的来源。
样式的来源分五种：
浏览器默认的样式；
用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；
外部样式，即 <link> 引用的 CSS 后缀文件；
内部样式，即写在 <style></style> 标签内的样式；
内联样式，即直接写在 style 属性内的样式（一般不用）；
CSS 权威指南中对样式来源的分类分成三种：
创作人员（上面提到的第3、4、5点都可归到这一点）
读者（用户自定义样式）
用户代理（浏览器默认样式）
正常情况下，样式来源的重要性排行为：创作人员的样式 > 读者的样式 > 用户代理的默认样式。但有 !important 标志的的读者样式要强于所有其他样式，包括有 !important 标志的创作人员样式。（所以说为什么慎用 !important ：权重太高，很容易出现问题 ）。
而创作人员的样式中，样式重要性排行为：内联样式 > 内部样式 > 外部样式（就近原则，内联最近所以最重要）
1.3 层叠规则
1.3.1 重要性
重要性从高到低：创作人员的样式（内联样式 > 内部样式 > 外部样式） > 读者的样式 > 用户代理的默认样式
1.3.2 特殊性
重要性一样，比较特殊性，谁权重大谁显示 。相当于 css 三大特性的优先级
1.3.3 源次序
特殊性一样，比较源代码书写顺序，后覆盖前。相当于 css 三大特性的层叠性
1.4 属性值计算规则
1.4.1 确定声明值
大家先和平相处，各自填上彼此没有冲突的属性的属性值，之后就是重头戏了。
作者样式表、浏览器默认的样式表、读者样式表中没有冲突的声明，作为css属性值。
1.4.2 层叠冲突
对于冲突，我们一起遵守一套规则——层叠规则，先比重要性，重要性大的先填，再比特殊性（计算权重），特殊性大的再填，最后比较源次序，源次序后的填入。
对样式表有冲突的声明使用层叠规则，确定css属性值。
1.4.3 继承
各样式表之间可能对某些属性没有定义，这时候虽然处于和平状态，但大家也不会选择去填这个属性的属性值。但这些元素可以去和他们的父亲求助，继承对应的属性。
对仍然没有值的属性，若可以继承，则可以继承父元素的值。 相当于 css 三大特性的继承性
1.4.4 使用默认值
但有些元素可能他们父亲一穷二白，使得他们无法继承，这时候只能使用默认的值。
对仍然没有值的属性，使用默认值。
1.5 <a> 标签样式需要单独指定的解释
我们如果没有单独对 <a> 样式单独指定，那么作者样式表就没有关于 <a> 标签样式的值，但浏览器默认样式是有的。所以，我们进行属性值计算的时候，<a> 标签部分样式就被浏览器默认样式填上了，进而导致 <a> 继承无效。所以，我们的 <a> 标签的样式还是需要单独指定。
如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ