CSS选择符优先级

来源：互联网发布：淘宝买快排犯法吗编辑：程序博客网时间：2024/05/21 17:45

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;}

显示结果：