层叠概述

层叠是一种机制,用于解决CSS声明冲突。(a,b,c,d)
声明冲突:多个相同的CSS声明,应用到同一个元素上。
层叠机制


1.比较优先级
当发生冲突时,优先级高的会保留,优先级低的会被淘汰。
一个声明的优先级,与它的来源和重要性有关。
来源:作者样式表、浏览器默认样式表、用户样式表
重要性:属性值后跟上!important,则表示一条重要声明
示例:color:red !important;
优先级(只针对开发者):浏览器<作者的普通声明<作者的重要声明


2.比较特殊性
每一个声明都有一个特殊性(specificity),特指值或度。
发生冲突,也属性高保留,低淘汰。
特属性,取决于规则使用范围的大小。
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高。
特殊性: 行内样式表>id选择器>类选择器>元素选择器>通配符选择器
a越大也属性越高若a相同则比较b,依次类推
a:声明行内样式,声明为1,否则为0。
b:规则中id选择器的个数。
c:规则中类选择器、伪类选择器和属性选择器个数。
d:规则中元素选择器、伪元素选择器的个数。
当计算选择器分组的时候,要分开计算。


3.比较源次序
最后出现的声明生出,其他的全部淘汰。

猜你喜欢

转载自www.cnblogs.com/xiegang/p/8905746.html
今日推荐