CSS选择器优先级 - 码农教程

HTML5学堂：CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级：id > class > tagname。具体我们来看看本文给大家讲解的CSS选择器优先级。

什么是CSS选择器优先级

在我们使用CSS进行样式设置时，首先需要选择到相应标签，此时我们会使用到CSS选择器进行标签的选择。当多种选择器均选择到了一个标签时，且均进行了样式的设置，那么到底哪种样式生效呢？此时就会涉及到我们的CSS选择器的优先级问题。

demo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
.con {
width: 100px;
height: 100px;
background: #ccf;
text-align: center;
}
.wrap div {
background: #fcc;
font-size: 44px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="con">HTML5学堂 - 专注于HTML5技术教育</div>
</div>
</body>
</html>

在上面的实例中，类名为con的div样式为：宽度100像素，高度100像素，浅红色的背景颜色，字体大小44像素，行高为100像素，且在父级元素中水平居中对齐。

那么，此时，是否对优先级有所了解了呢？

再举一个生活的例子吧，假设你还在上高中，这时候你的班长站在班级讲台上，宣布下午放假半天。（是不是会很开心？）可是，这时候你的班主任老师说了一句：放什么放，不放假，继续学习~~~那么，你们班又有几个人敢“私自放假”呢？优先级就如同这个——谁说话最“算数”。换到我们的CSS样式上，不同的选择器优先级不同，一起来了解一下吧~

需要掌握优先级的选择器种类

id选择器

类名选择器

标签名选择器

伪类选择器

通配符选择器

除了上面提到的几种基本选择器之外，我们还需要了解由基本选择器组成的群组、后代选择器的计算方法。另外，对于标签内部书写的样式优先级也需要有所了解。

基本选择器的优先级

在我们了解优先级之前，需要先了解表示优先级的方式方法。通常我们用四位数字表示优先级，一位一位的进行比较。如，一种选择器的优先级是 0 1 1 0，另一种选择器的优先级是 0 1 0 2，那么就从第一位开始比较，两者均是0，此时看第二位，都是1，第三位，前者为1，后者为0，1自然是比0大的，所以，前者的优先级级别更高。

1、id选择器。用四位数字表示id选择器的优先级就是：0 1 0 0。如：#con {}

2、类名选择器。用四位数字表示类名选择器的优先级就是：0 0 1 0。如：.h5course {}

3、标签名选择器。用四位数字表示标签名选择器的优先级就是：0 0 0 1。如：div {}

4、伪类选择器（如:hover等a标签常见的四种伪类）。用四位数字表示伪类选择器的优先级就是：0 0 1 0

5、通配符选择器（*）。当通配符单独出现的时候，其优先级为：0 0 0 0。如果它存在于后代选择器当中，涉及到优先级叠加运算的时候，其优先级为：0 0 0 1。

群组与后代选择器

群组选择器：群组选择器其实就是使用逗号将2个以及2个以上的选择器进行分隔。此时我们针对每个被分隔开的选择器单独进行优先级即可。

后代选择器：后代选择器涉及到一个优先级的叠加，但是注意，优先级数量不能进位，如何来理解呢？来看下面这个例子：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
.wrap div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div>HTML5学堂 - CSS选择器优先级</div>
</div>
</body>
</html>

在这个例子当中，.wrap div就是一个典型的后代选择器，这个后代选择器实际上是由一个id选择器和一个标签名选择器组成的，那么，id选择器的优先级是0100，标签名的优先级是0001，那么此时叠加在一起就是0101。

所谓不能够进位，就是即便这个后代选择器是由10个以上的类名选择器组成的，那么此时它的优先级也只能是0 0 10 0，而不是0 1 0 0。即不遵循逢十进一的原则，或者我们可以这么理解——只要出现一个老师（id），多少个班长（类名）的建议都得被驳回~~~（其他位置的选择器同理）

存在于style属性中的样式

看了半天的0101，细心的同学会发现，压根没有出现1000这类优先级啊，最高位，实际上就是为我们的标签内部书写的样式保留的，如果了解了CSS引入方式的同学，应该还记得，我们说过，标签内部样式的优先级最高~！没错，如果在标签内部以style属性的形式进行了样式的定义，那么这种样式是其他任何选择器都无法覆盖的~

同级别优先级，采用谁的样式

当多种选择器指向同一目标选择器的优先级相同时，后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件中各个类选择器的排列有关。

这个道理和我们的生活也类似，老师上午10点钟过来宣布下午正常上课，11点钟过来宣布下午放假半天，你下午还会自己在这里上课么？~~~？

多个选择器选择到的标签，不同的样式怎么办

对于相同的样式，会产生覆盖，那么对于多个选择器中为同一个标签定义的不同样式呢？很简单，你的老师过来说，今天下午放假，你的班长过来说，下午请你一起去踢足球~两者不冲突，当然是照单全收啦~（即对于不同的样式，会全部生效）