CSS层叠概述
什么是层叠：
层叠是一种机制，用于解决CSS声明冲突（多个相同的CSS声明属性，应用到一个元素上）
层叠的过程
层叠机制
- 比较优先级
- 比较特殊性
比较优先级
- 每一个声明都有一个优先级；
- 当发生冲突时，优先级高的会保留，优先级低的会被淘汰；
- 一个声明的优先级，与它的来源和重要性有关
解释来源
- 作者样式表
- 浏览器默认样式表
- 用户样式表
解释重要性
- 若属性值后面跟 ！important，则表示一条重要声明；否则，表示普通声明。
- 示例： color:red;普通声明
- color:red ！important；重要声明
优先级从低到高
- 浏览器默认样式表中的声明
- 用户样式表的普通声明
- 作者样式表的普通声明
- 作者样式表中的重要声明
- 用户样式表中的重要声明
比较特殊性
- 每个声明都有一个特殊性(sepcificity)/特指值/特制度
- 当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰；
- 一个声明的特殊性取决于规则适用范围的大小
- 规则适用范围（范围最大的html和通用符选择器）越大，特殊性越低；适用范围越小，特殊性越高；
特殊性从高到低
行内样式 > ID选择器 > 类选择器 > 元素选择 > 通用符选择器
比较特殊性——具体规则
在比较特殊性时，每一个冲突的声明会生成{a，b，c，d}，以比较特殊性a越大，特殊性越高；若a相同，则比较b；以此类推……
a：若声明是行内样式，则为1，否则为0
b：规则中ID选择器的个数
c：规则中的类选择器，伪选择器和属性选择器的个数
d：规则中的元素选择器，伪选择器的个数
注：当计算并集选择器时，要分开计算
