在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>
//为内联样式 特殊性高于其它外部样式