在css中,有可能给同一个元素属性定义两次不同的数值。如:
h1 { color: red }
body h1 { color: red }
此时给h1定义了两种颜色,但是h1不可能有两种颜色,以上两种颜色只有一种能匹配h1的颜色。
而哪个颜色将会匹配h1,此时就需要了解css选择器的特殊性。
对于每一个规则,用户代理会计算选择器的特殊性,并将该特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。
将特殊性的结果比作四位数值。 如: 0, 0, 0, 0 ,有以下规则。
(1),声明中的每个ID属性值,加 0, 1, 0, 0. 如:
.#answer { color: red } // 特殊性: 0, 1, 0, 0 answer是一个id
(2),每个元素和伪元素, 加 0, 0, 0, 1 如:
h1 { color: red } //特殊性:0, 0, 0, 1 只有一个元素h1 div ul li { color: red } //特殊性:0, 0, 0, 3 三个元素( div, ul, li )
(3),每个类属性值,伪类,或属性选择器, 加 0, 0, 1, 0 如:
h2.grape { color: red } //特殊性:0, 0, 1,1 一个类属性值grape,一个元素h2 input[ type=“text” ] //特殊性:0, 0, 1, 1 一个属性选择器type=“text” 一个元素input
(4),结合符和通配选择器对特殊性贡献为0
* { color: red } 特殊性:0, 0, 0, 0
(5),继承来的属性没有特殊性,还不如0.
(6),內联样式声明的属性特殊性第一个数字为1,比其它外部声明的属性的特殊性都高
(7),带有important的属性特殊性最高.
(8),相同属性的特殊性相同时,匹配后声明的样式
例1:
p { color: red; //特殊性:0, 0, 0, 1 } body p { color: green; //特殊性:0, 0, 0, 2 特殊性较高 }
<p>My color: Red Or Green ?</p>
结果为:
例2:
body h1 { color: black; //特殊性:0, 0, 0, 2 } .test { color: gray; //特殊性:0, 0, 1, 0 } h1.test { color: orange; //特殊性:0, 0, 1, 1 特殊性最高 }
<h1 class="test">My color: Black Or Gray Or Orange ?</h1>
例3
#test { color: red; 特殊性:0, 1, 0, 0 特殊性较高 } table tr td ul li[id="test"] { color: gray; 特殊性:0, 0, 1, 5 }
<table> <tr> <td> <ul> <li id="test">My Color ?</li> </ul> </td> </tr> </table>
例4
#test { color: green; 特殊性: 0, 1, 0, 0 }
<p id="test2" style="color: red">My Color is Red</p> //为内联样式 特殊性高于其它外部样式