【攻破css系列——第七天】属性值的计算

1. 属性值的计算

1.1 定义

网页在渲染的时候，元素的所有 css 属性必须有值，这样才能保证整个网页正常实现。

而一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。

1.2 样式的来源

相同选择器、不同选择器选择同一元素，会发生样式的冲突，即层叠冲突。但实际上，层叠规则还包含一个很重要的层面：样式的来源。

• 样式的来源分五种：

  1. 浏览器默认的样式；

  2. 用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；

  3. 外部样式，即 <link> 引用的 CSS 后缀文件；

  4. 内部样式，即写在 <style></style> 标签内的样式；

  5. 内联样式，即直接写在 style 属性内的样式（一般不用）；

• CSS 权威指南中对样式来源的分类分成三种：

  1. 创作人员（上面提到的第3、4、5点都可归到这一点）

  2. 读者（用户自定义样式）

  3. 用户代理（浏览器默认样式）

正常情况下，样式来源的重要性排行为：创作人员的样式 > 读者的样式 > 用户代理的默认样式。但有 !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> 标签的样式还是需要单独指定。

参考KerwinLee的博客

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ