1.特指度
如果有多个CSS规则作用于同一个元素上,那么特指度最高的声明将胜出
特指度值的计算方法
选择符的每个ID属性值 0,1,0,0
选择符的每个类属性值,属性选择 或伪类加 0,0,1,0
选择符中的每个元素和伪元素加 0,0,0,1
连结符和通用选择符不增加特指度
下面将列举一些例子
h1 {
color: red;
}
// 0 , 0 , 0 , 1
body h1 {
color: green;
}
// 0 , 0, 0 , 2
上面第二个特指度更大,所以h1为绿色
li #answer {
color: navy;
}
//0 1 0 1
html > body li {
color: red;
}
// 0 0 0 3
样式规则采用第一个
一些注意:
用户代理会将多个样式规则分开,在任何情况下, 用户代理都会确定哪些规则与元素匹配,然后找出所有相关的声明,计算各自的特指度,判断哪些规则胜出,再把胜出的规则应用到元素上,得到装饰后的结果。用户代理可以自动处理一切
另,行内样式的特指度是最高的, 1,0,0,0
以及重要!important 始终比任何非重要的都优先,重要的声明作为一个整体,其中的冲突使用特指度解决
继承是无特指度,零特指度会战胜无特指度,通用选择符是零,所以可以战胜继承
2.层叠
如果两个规则的特指度值相等,那么该选择哪一个呢
权重和来源排序
!import 优先级最高
行内优先级稍低,
如果两者都有!import,行内样式优先级最高
如果显示权重相同,那么就要考虑规则的来源
权重从高到低
1.读者提供的样式以!important标记的声明
2.创作人员编写的样式中以!important标记的声明
3.创作人员编写的常规声明
4.读者提供的常规说明
5.用户代理的默认声明
如果声明的所有都相同,那么则特指度值越大越优先,如果仍然相同,后面的样式覆盖前面的样式
本文为CSS权威指南第三章笔记