小和尚学习 - 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. 比较源次序

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

三. 属性继承

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

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

四. 使用默认值

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

---

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

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

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

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

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