CSS中的层叠

大家好，今天我来和各位分享层叠的过程是如何实现的，希望能帮到对层叠尚不熟悉的朋友。

层叠的过程：

1.比较优先级

　　优先级低的声明会被淘汰，高的胜出。

　　每个声明都有一个优先级，当声明发生冲突，优先级高的会被保留。一个声明的优先级与他的来源和重要性有关。

　　当属性值后加上！important时，为最高优先级。

　　优先级的从高到低↓

　　1.浏览器默认样式表中的声明。

　　2.用户样式表中的普通声明。

　　3.作者样式表的普通声明。

　　4作者样式表中的重要声明。

　　5.用户样式表中的重要声明。

2.比较特殊性

　　每一个声明都有一个权重（特殊性，特指度 Specificity weight）

　　每当发生冲突时，特殊型高的会被保留，特殊性低的会被淘汰。

　　一个声明的特殊性，取决于规则适用范围的大小。

　　规则适用范围越大，特殊性越低，适用范围越小，特殊性越高。

　　特殊性从高到低↓

　　行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器

　　具体规则

　　在比较特殊性时，每一个冲突的声明会生成4个数字分组（a、b、c、d）以比较特殊性。

　　a：若声明是行内样式，则为1，否则为0.

　　b：规则中的ID选择器的个数

　　c：规则中类选择器、伪类选择器和属性选择器的个数。

　　d：规则中元素选择器、伪元素选择器的个数

　　当计算器选择器分组的时候，要分开计算。

3.比较源次序

　　当优先级与特殊性相等时，后出现的规则胜出。

　　用多个类对样式分层。

　　让选择器特殊性保持较低的方法之一是尽可能模块化，在元素之间共享相同的样式。尽可能模块化的方法之一是多个类对不同的样式分层。