CSS选择器的特殊性
本文最后更新于:2020年3月28日 上午
CSS选择器的特殊性
当可能一个一个元素可以使用一个多个元素匹配,那么需要根据每个选择器的特殊性(specificity)来适配最高特殊性:
选择器的特殊性由选择器本身决定:选择器的特殊值表示为四部分:0, 0, 0, 0;
- 对于选择器中的给定的各个ID属性值,加 0,1,0,0;
- 对于选择器中的给定的类选择器,属性选择器和伪类,加:0,0,1,0;
- 对于选择器中的给定的各个元素和伪元素选择器,加:0,0,0,1;
- 结合符和通配选择器没有任何贡献;
1 |
|
在上方例子中,当含有em的CSS规则第二条和第五条相冲突时候,明显第五条的规则特殊性比第二条的特殊性高,所有em表现为第五条的规则。
声明和特殊性
1 |
|
当一个声明的存在多个规则的时候,用户代理会计算出特殊性并确定哪些规则胜出跟声明相匹配
通配选择器的特殊性
如上,通配选择器的特殊性的值为0,0,0,0,基本没有任何贡献,所以当出现通配选择器的时候,是不会对特殊性做出改变的
ID和属性选择器的特殊性
如上ID选择器的特殊性贡献为0,1,0,0;属性选择器的贡献是0,0,1,0;举个例子🌰:
1 |
|
⚠️:在这里属性选择器中 #meadow > [id="meadow"]这里很明确的表示了,即使属性中出现了id但是特殊性也不必上ID选择器的特殊性。
内联样式特殊性
之前我们所看到的特殊性第一位都是0,但是在内联样式中,第一位总是保持着1,0,0,0;
1 |
|
⚠️:在CSS2.1开始样式特殊性的值0,0,0,0;第一位就是为内联样式新增的。
重要性
在声明某个很重要的声明时候,CSS2.1称之为重大声明---!important,允许在分号未结束之前插入!important来表示:
1 |
|
⚠️:!important总是放在声明最后并且是在分号之前,如果一个属性包含多个值,那么也必须放在最后!