释义

某个元素从所有CSS属性都没有值，到所有CSS属性都有值的过程。

所有属性的计算结果可以在控制台找到：

计算过程

1. 确定声明值

对比作者自己写的样式和浏览器默认的样式有没有冲突

没有冲突的样式，直接作为计算后的样式

有冲突，则进入下一步层叠计算

2. 层叠计算

2.1 比较源的重要性

整体来讲有三种来源：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为页面作者样式。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为用户样式。

页面作者样式 !important > 用户样式 !important > 用户代理样式 !important > 页面作者样式 > 用户样式 > 用户代理样式

2.2 比较特殊性（优先级）

第一步：对每个选择器分别计数

style	id	属性	元素
内联样式：1，非内联：0	id选择器的个数	属性、类、伪类的数量	元素、伪元素的数量

例如<style>标签中选择器.h svg:hover path的计数结果为：(0, 0, 2, 2)

第二步：比较计数结果

从左往右比较相同的位，哪个选择器数值大就用哪个的样式

所以:hover的时候fill: #27ae60;就会覆盖fill: #333;

2.3 比较源次序

相同选择器里相同的样式属性，后面的会覆盖前面的

3. 继承

对仍然没有值的属性若可以继承则使用继承

4. 使用默认值

对仍然没有值的属性直接使用属性的默认值