CSS选择器的优先级别

CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。

1.如果样式是行内样式（通过Style=””定义），那么a=1

2.b为ID选择器的总数

3.c为Class类选择器的数量。

4.d为类型选择器的数量

5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样

6.!important 权重最高，比 inline style 还要高

选择器	特殊性 (a,b,c,d)
Style= ””	1,0,0,0
#wrapper #content {}	0,2,0,0
#content .datePosted {}	0,1,1,0
div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
p.comment .dateposted {}	0,0,2,1
div.comment p {}	0,0,1,2
.comment p {}	0,0,1,1
p.comment {}	0,0,1,1
.comment {}	0,0,1,0
div p {}	0,0,0,2
p {}	0,0,0,1

CSS优先级的读法

这里先更正一些错误的读法。通过百度搜索到的内容中，通常出现这样的写法：(1,0,0,0)，但有部分文章对它的解释不全面，有的甚至有误。

其中最大的一个错误就是把结果加：(1,0,0,0)=1000，(0,0,2,2)=22，更有甚者：(0,1,0,1)=0+1+0+1=2！虽然这些理解在很简单的情况下看上去是正确的，但本质上却是个重大的错误。

另外有部分文章把它理解为4个级别，也相近，但不能把条理分清楚，理解起来也难。

“CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先”级。

这句话总结得很好，但对初学者来说，在理解方面就有点难度了，“四个级别”，太容易混淆，其实应该是“四组级别”。

我认为，对优先级的读法，应该是以“组”来分，这个组之间相互独立，从左到右进行对比。它们成组出现，以逗号分隔。

selector( a , b , c , d )

compare: ↑ , ↑ , ↑ , ↑

selector( a , b , c , d )

正如w3c.org中原文所示，分为a,b,c,d四组，全为正整娄，默认为0，对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时，从左到右1对1对比，当比出有大者时即可停止比较。

(资源库 www.zyku.net)