小和尚学习 - CSS属性值的计算过程

你活了多少岁不算什么，重要的是你是如何度过这些岁月的。——亚伯拉罕·林肯

在正式介绍CSS 属性值计算前先来看个经典的问题：

• a 标签的:link、:visited、:hover、:active伪类书写顺序导致，最终显示效果不一致的问题

如果上诉问题还不是很明白的，请继续往下看

首先我们得知道，仅当元素的 CSS 属性都不为空，浏览器才会渲染该元素，那么元素的 CSS 属性值从无到有的过程就叫作CSS 属性值的计算过程

我想很多人会疑惑，我明明只给元素设置了一两个 CSS 属性，怎么就所有的 CSS 属性都有值了，其实当元素的 CSS 属性值为空，浏览器就会使用 CSS 属性值计算规则，给该属性赋值

CSS 属性值计算过程

一. 确定声明值

CSS 属性值默认全为空，将开发者写的无冲突 CSS 样式作为初值赋值给对应的 CSS 属性，当遇到冲突时，使用层叠解决

二. 层叠（权重值计算）

声明冲突：多个 CSS 样式，作用于同一元素

层叠：浏览器解决声明冲突的过程，浏览器自定处理

作者样式表：开发者写的 CSS 代码

层叠规则：

1. 比较重要性

   重要性从高到底

   1）作者样式表中的!improtant关键字
   2）作者样式表中普通样式
   3）浏览器默认样式表

2. 比较特殊性

   目标是作者样式表中普通样式

   特殊性看选择器，选择器选中范围越窄，特殊性越强

   具体规则：根据选择器，计算一个 4 位数的权重

   1）千位：如果是内联样式，千位为 1，否则为 0
   2）百位：等于选择器中所有 id 选择器的数量
   3）十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
   4）个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

   比较代码的书写位置，后面的覆盖前面的

三. 属性继承

当经过了一、二两步后，仍有CSS 属性为空，则查看该属性能否继承，能就使用继承的值，不能则执行下一步

大多数与文字相关的 CSS 属性都能继承

四. 使用默认值

如果经过了以上三步，属性依然为空，则使用浏览器对该属性的默认值

---

当学习 CSS 属性值的计算过程过，我们再来看看最开始的题

一. a 标签的:link、:visited、:hover、:active伪类书写顺序

1. 确定声明值：给:link、:visited、:hover、:active赋值
2. 层叠：在鼠标移动到 a 元素上时，同时触发了 link，hover 伪类状态，那么这时就产生了声明冲突，由于这两个都属于作者样式表中的样式，那么我们就直接从比较特殊性开始，如果不能解决冲突，再比较源次序

1）比较特殊性 （计算权重）
a:link：1 + 10 = 11
a:hover: 1 + 10 = 11
相同无法解决冲突

2）比较源次序
这里就看你代码的书写顺序了，遵守后面覆盖前面的原则
比如 hover 写前面，那么就使用 link 的样式
反之则使用 hover 的样式