CSS选择器优先级

CSS选择器分类

经过一番浏览，发现css的选择器分类方法其实还蛮多的。以下参照《CSS权威指南》和根据我理解做出分类：

• 通配选择器
• 标签选择器
• 类选择器
• ID选择器
• 属性选择器
• 伪类和伪元素选择器

CSS选择器优先级

所谓优先级就是分配给一个CSS声明的权重，它决定了优先级高的CSS声明将被应用到元素上。
而当多个声明的优先级相等时，CSS中这些声明的最后一个将被应用到元素上。

一般根据选择器类型，他们的优先级如下：
important > 内联样式 > ID选择器 > 类选择器 | 伪类选择器 | 属性选择器 > 标签选择器 | 伪元素选择器 > 继承 > 通配符

那么，优先级应该怎么计算呢？
根据以上不同类型的选择器，我们赋予它们不同的权重值如下：

• 标签选择器：1
• 伪元素选择器：1
• 类选择器：10
• 属性选择器：10
• 伪类选择器：10
• ID选择器：100

在CSS的组合选择器中，它的权重值就由各个选择器的权重相加所得。
我们举个栗子：

<div id="testdiv">
    <p class="testp">这是一个例子</p>
</div>

p{color:red;}
.testp{color:yellow;}
div#testdiv p{color:green;}
#testdiv p.testp{color:blue;}
#testdiv .testp{color:grey;}

以上例子，不管css的顺序是怎么样的，文本的颜色都是蓝色（blue）。
它们的权重分别为：1、11、102、111、110。

除此之外，important的优先级永远最高，但是我们应该避免使用important，因为它会破坏样式表中固有的级联规则，使我们的调试过程更加困难。
内联样式的优先级次之，而通配符的优先级最小，第二小的就是继承关系了。

最后

第一篇关于前端的文章，是在面试中碰到而自己却从来没有考虑过的一个问题。因此决定记录下来。