1.计算优先级的步骤
(1)如果一条声明来自style属性,也就是内联样式,那么它具有最高的优先级。如果不是,则转入第二步。
(2)计算ID选择符的数目。数目最大的声明具有最高的优先级。如果两个或多个声明具有相同的ID选择符的数目(包括0),则转入第三步。
(3)计算类选择符、属性选择符和伪类选择符的数目。总数最大的声明具有最高的优先级。如果两个或多个声明具有相同的总数,则转入第四步。
(4)计算类型选择符和伪元素选择符的数目。总数最大的声明具有最高的优先级。如果两个或多个声明具有相同的总数,则最后面的声明获得最高的优先权。
在实际应用中,我们可以采用用逗号分隔的四个数字的形式来计算优先级,即a,b,c,d。重要程度从左到右依次降低。
计算选择符的优先级如下所示:
- 计算a,如果声明来自style属性即内联样式,则计数为1,否则为0。
- 计算b,统计ID选择符的数目。
- 计算c,统计类选择符、属性选择符和伪类选择符的总数。
- 计算d,统计类型选择符和伪元素选择符的总数。
2.实例
<p style="color:red;" class="color">红色</p>
body #index div#container p.color {
color:blue;
}
首先来分析第一条代码。因为p标签中使用了style属性,这是一个内联样式,所以a的值为1,优先级可以表示为1,0,0,0。
然后分析第二条代码。规则中的选择符包括两个ID选择符#index和#container,一个类选择符.color,三个类型选择符body、div和p。则优先级可表示为0,2,1,3。
比较第一位的数字,因为1比0大,所以内联样式的优先级高。
3.通配选择符的优先级
先来看几行代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>通配选择符</title>
<style>
* h1 span {
color:red;
}
h1 span {
color:blue;
}
</style>
</head>
<body>
<h1><span>通配选择符</span></h1>
</body>
</html>
猜猜标题的颜色是红色还是蓝色?
如果你以为是红色那就错了,答案是蓝色。
因为通配选择符的优先级为0,所有的组合符的优先级均为0,。也就是说在计算的时候可以忽略它们。如果通配选择符不是选择符中的唯一组件,则它是可以省略的。在上述代码中,两个规则中的选择符其实是等价的,加不加通配选择符都一样。
但是有一种情况例外,那就是通配选择符在中间的时候。请看下面的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
<style>
body span {
background-color:blue;
}
body * span {
background-color:red;
}
</style>
</head>
<body>
<h1><span><span>HTML5</span></span></h1>
<span>蓝色</span>
</body>
</html>
显示结果:
选择符body * span匹配的是span中的“HTML5”,而不匹配span中的“蓝色”。在这种情况下,通配选择符是不能省略的。
4.不同CSS引入方式选择符的优先级
对于通过link标签引入的外部样式表,在其他条件相同的情况下,后面的样式表中的声明的优先级要高。而对于通过style标签引入的内部样式表和通过link标签引入的外部样式表同时存在的情况下,很多人存在一种误解,认为内部样式表中的声明会自动覆盖外部样式中的声明。实际上,如果在内部样式表之后通过link标签引入外部样式表,那么外部样式表中的声明将会覆盖内部样式表中的声明。
在上面的代码中通过在style标签之后link标签引入外部样式表如下:
body * span {
background-color:yellow;
}
显示结果: