层叠机制可以解决CSS声明冲突
步骤如下
一、比较优先级
CSS出现声明冲突时,优先级高的会保留,优先级低的会淘汰,声明的优先级与它的来源和重要性有关
按照优先级从低到高的顺序:
浏览器的默认样式表中的声明
用户样式表中的普通声明
作者样式表中的普通声明
作者样式表中的重要声明
用户样式表中的重要声明
二、比较特殊性
特殊性也叫特指值,特指度,当出现声明冲突时,特殊性高的会被保留,特殊性低的会被淘汰,声明的特殊性取决于规则适用范围的大小
1.按照特殊性从高到低的顺序:
行内样式
ID选择器
类选择器
元素选择器
通配符选择器
2.当比较特殊性时,每一个冲突的声明,会生成四个字母(a,b,c,d)来比较特殊性
a越大,特殊性越高,当a相同时,比较b,b越大,特实行越高,c,d同理
a:当声明为行内样式,a为1,否则为0
b:规则中ID选择器的个数
c:规则中类选择器、属性选择器和伪类选择器的个数
d:规则中元素选择器、伪元素选择器的个数
例如: a b c d (个数)
a{color:blue; font-size:22px;} 0 0 0 1
.foo{color:yellow;} 0 0 1 0
#bar{color:red; background-color:white;} 0 1 0 0
.main>div #nav *.home a:link{color:green;} 0 1 3 2
3.当计算选择器分组的时候,要分开计算
三.比较源次序
最后出现的声明胜出,其他的全部淘汰
此规则的实际应用:
CSSreset代码前置
a元素的伪类书写顺序