CSS层叠顺序
为了找到元素的特性的指定值,用户端即浏览器要经历如下的排列顺序:
1、判断目标媒介类型mediatype
2、比较样式来源和重要性(是否含!important)
优先级排列从小到大:
1)用户端声明( UAdeclarations )
2)一般用户声明( usernormal declarations )
3)一般作者声明(author normal declarations )
4)加了'!important' 的作者声明( authorimportant declarations )
5)加了'!important' 的用户声明(user important declarations )3、比较选择器特殊性
注意:选择器的特殊性比较只在来源相同,且相同重要性的规则之间进行。如都来自作者样式表,且都带有或都不带有!important。对于一个来源不同,或一个带有!important另一个不带有!important的规则是不需要比较选择器特殊性的。4、比较先后顺序
如果两条规则具有相同的来源,相同的选择器特殊性,则后出现的规则会覆盖先出现的规则。
选择器特殊性计算
一个选择器的特殊性由四个数组成,表示为0.0.0.0,比较时先比左第一位,大则胜出,相等则比下一位:
第1位 | 若有内联样式则置1 | 即1.0.0.0 |
第2位 | 选择器中id的个数 | 如#id1 #id2{ } 对应0.2.0.0 |
第3位 | 选择器中class、伪类、属性的个数 | .a.b[type="text"]:hover{ } 对应0.0.4.0 |
第4位 | 选择器中元素、伪元素的个数 | h1:first-letter{ } 对应0.0.0.2 |
常见伪类 | :hover :link :visited :active :focus :first-child :lang | |
常见伪元素 | :first-letter :first-line :before :after | |
补充说明 | 通配符(*)和继承来的CSS没有任何特殊性 |