样式的特性及优先级别
所谓的特殊性是指，作用于同一元素的同一特性 (property)的不同选择器的多个值，哪个会起作用，特殊性值最高的会起作用。比如，如下代码中，多个样式中的 'background-color' 同时作用于同一个 DIV 元素，那么最后，到底 DIV 应该会是什么颜色呢？
我们先来看一下特殊性的计算规则。
特殊性的值可以看作是一个四位数，用a，b，c，d来表示它的四个位置。其中，a可以看作是千位，b为百位，c为十位，d为个位。这个数越大，特殊性的值就越大。注意，W3C中并不是把它作为一个4位数来看待的，我在这里只是做个比喻。
下面说明，a，b，c，d都是怎么确定的：
1. 如果 HTML 标签的 'style' 属性中该样式存在，则记 a 为 1；
2. 数一下选择器中 ID 选择器的个数作为 b 的值，比如，以上的 '#c1' 和 '#c2'都算；
3. 其他属性 以及 伪类（pseudo-classes）的总数量是 c 的值，比如，上面例子中的'.con'，':hover'等；
4. 元素名和伪元素的数量是 d 的值；比如上面例子中的 ‘div’。
W3C官方给出的例子：
现在，让我们回到一开始的例子，计算下各个样式的特殊性的值：
+展开
-HTML
<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con {
background-color: yellow;
}
div {
background-color: black;
}
#c2 div {
background-color: blue;
}
#c2 #content {
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con {
background-color: yellow;
}
div {
background-color: black;
}
#c2 div {
background-color: blue;
}
#c2 #content {
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
我们先来看一下特殊性的计算规则。
特殊性的值可以看作是一个四位数，用a，b，c，d来表示它的四个位置。其中，a可以看作是千位，b为百位，c为十位，d为个位。这个数越大，特殊性的值就越大。注意，W3C中并不是把它作为一个4位数来看待的，我在这里只是做个比喻。
下面说明，a，b，c，d都是怎么确定的：
1. 如果 HTML 标签的 'style' 属性中该样式存在，则记 a 为 1；
2. 数一下选择器中 ID 选择器的个数作为 b 的值，比如，以上的 '#c1' 和 '#c2'都算；
3. 其他属性 以及 伪类（pseudo-classes）的总数量是 c 的值，比如，上面例子中的'.con'，':hover'等；
4. 元素名和伪元素的数量是 d 的值；比如上面例子中的 ‘div’。
W3C官方给出的例子：
+展开
-HTML
<style type="text/css"> * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
</style>
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</style>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
</style>
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</style>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
现在，让我们回到一开始的例子，计算下各个样式的特殊性的值：
+展开
-HTML
<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
background-color: yellow;
}
div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
background-color: black;
}
#c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
background-color: blue;
}
#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
background-color: yellow;
}
div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
background-color: black;
}
#c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
background-color: blue;
}
#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
可见，‘#c1 #c2 div.con ’的特殊性最高，是0211，那么背景色应该是黄色才对。打开浏览器测试一下，发现，果然是黄色，很神奇吧：）
关于特殊性的计算具体细节，请参考W3C CSS2.1 6.4.3 Calculating a selector's specificity。
文章来源：http://topic.csdn.net/u/20100630/15/B1AADDA3-7842-447F-985A-81FCCF64D4F2.html
加支付宝好友偷能量挖...
