大家好,今天我来和各位分享层叠的过程是如何实现的,希望能帮到对层叠尚不熟悉的朋友。
层叠的过程:
1.比较优先级
优先级低的声明会被淘汰,高的胜出。
每个声明都有一个优先级,当声明发生冲突,优先级高的会被保留。一个声明的优先级与他的来源和重要性有关。
当属性值后加上!important时,为最高优先级。
优先级的从高到低↓
1.浏览器默认样式表中的声明。
2.用户样式表中的普通声明。
3.作者样式表的普通声明。
4作者样式表中的重要声明。
5.用户样式表中的重要声明。
2.比较特殊性
每一个声明都有一个权重(特殊性,特指度 Specificity weight)
每当发生冲突时,特殊型高的会被保留,特殊性低的会被淘汰。
一个声明的特殊性,取决于规则适用范围的大小。
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高。
特殊性从高到低↓
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器
具体规则
在比较特殊性时,每一个冲突的声明会生成4个数字分组(a、b、c、d)以比较特殊性。
a:若声明是行内样式,则为1,否则为0.
b:规则中的ID选择器的个数
c:规则中类选择器、伪类选择器和属性选择器的个数。
d:规则中元素选择器、伪元素选择器的个数
当计算器选择器分组的时候,要分开计算。
3.比较源次序
当优先级与特殊性相等时,后出现的规则胜出。
用多个类对样式分层。
让选择器特殊性保持较低的方法之一是尽可能模块化,在元素之间共享相同的样式。尽可能模块化的方法之一是多个类对不同的样式分层。