CSS选择器的权重与优先规则

发表于 | 分类于

CSS样式的分类

我们都知道CSS样式分为三种，一种是直接写在标签上的行内样式，一种是写在页面头部<head></head>标签内部的style标签内部的内部样式，最后一种是单独写在CSS文件里需要在头部使用link标签引用的外部样式。而且这三种样式具有不同的优先级别，离标签最近的样式具有更高的优先级别，即三者的优先级别由高到低的顺序为：行内样式>内部样式>外部样式。

关于CSS样式覆盖

绝大多数时候我们使用的是外部样式。

我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上添加新样式覆盖它们。
那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？这就涉及到CSS样式的优先级别了。

在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先，会覆盖掉之前的同优先级别的样式。

CSS选择器的权重

那么，我们怎么来计算选择器的权重呢？下面这张图介绍了特殊性的计算方法：

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。最后通过比较权重值得出优先级先后顺序，权重值越大的优先级别越高。

权重值分类

权重值分为以下四类，分别对应各自的权重值。

1. 第一等：代表内联样式，即行内样式。如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，其权值为100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为10。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

计算某个选择器的权重值时，只需要把选择器中涉及到的几类选择器的权重值相加求和即可得到整个选择器的权重值。

以上一部分的图为例：其中#NAV为二等选择器，.ACTIVE为三等选择器，UL、LI和A为四等选择器。则整个选择器表达式的权重值为1*100+1*10+3*1=113。

权重计算示例

类似的，以下图片是一些算例：

再看一个算例

下边是一段HTML代码：

<div id="content">
	<div id="main-content">
		<h2>CSS简介</h2>
		<p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
		<div class="paragraph">
			<h2 class="first">使用CSS布局的优点</h2>
			<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
		</div>
	</div>
</div>

下面是CSS代码：

#content div#main-content h2{
	color:red;
}

#content #main-content>h2{
	color:blue
}
body #content div[id="main-content"] h2{
	color:green;
}

#main-content div.paragraph h2{
	color:orange;
}
#main-content [class="paragraph"] h2{
	color:yellow;
}
div#main-content div.paragraph h2.first{
	color:pink;
}

在设置了这些选择器之后，哪一个会生效呢？

我们分别计算一下每个选择器的权重值：

  • 第一个选择器的权重值=2*100+2*1=202
  • 第二个选择器的权重值=2*100+1=201
  • 第三个选择器的权重值=1*100+1*10+3*1=113
  • 第四个选择器的权重值=1*100+1*10+2*1=112
  • 第五个选择器的权重值=1*100+1*10+1*1=111
  • 第六个选择器的权重值=1*100+2*10+3*1=123

根据计算结果可以知道选择器的优先级先后顺序，从而可以确定红色的选择器会生效。

事实上，以上代码在浏览器中看到的结果和我们的计算结果是一样的，最终的h2标签的字体颜色是红色。见下图：

注意事项

注意：对于通用选择器*，子选择器>和相邻同胞选择器+并不在这四个等级中，他们的权值都为0。

如果在写网页时遇到了似乎没有起作用的CSS规则，很可能是出现了优先级别冲突。请在你的选择器中添加他的一个父元素的ID，从而提高它的特殊性。如果这能解决问题，就说明样式表中很可能有更特殊的规则覆盖了你的规则。如果是这种情况，你可能需要检查代码，解决特殊性冲突，最终实现想要的效果。