特指度和层叠

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权威指南第三章笔记