关于CSS的优先级

在阅读《CSS权威手册》时最迷惑的就是CSS的优先级问题，可能主要是里面表达方式让人难以理解吧。

简要总结一下CSS的优先级：

CSS选择器本身的特殊性值可用4位数字表示(0,0,0,0)，4组数字依次代表选择器中的行内（内联）选择器,ID,class,元素选择器，如p .left可表示为0,0,1,1；div p #newsList可表示为0,1,0,2；

其中4组选择器中第三组除了类属性值外还包括属性选择以及伪类，因此（除了ie6及之前）ul li a[title=”tip”]可表示为0,0,1,3。

结合符及通配选择器对特殊性无影响。

CSS的优先级由选择器的特殊性决定，由左向右逐组比较，特殊性高的选择器级别优先。也即遵循：行内选择>ID>class>标签

如：

h1{color:red;}/*0,0,0,1*/
body h1{color:green;}/*0,0,0,2*/
h2.titleInfo{color:purple;}/*0,0,1,1*/
div>ul>li a[title=”a”] span{color:gray;}/*0,0,1,5*/

ID与属性选择器的特殊性

ID选择器与属性选择器存在着歧义的一种情况：

ul #first{color:red;}
ul li[id=”first”]{color:green;}

两者特殊性值分别为0,1,0,1和0,0,1,1，因为#first优先级较大。

有如下例子：

<style type=”text/css”>
li{color:gray;}
ul li[id=”first”]{color:green;}
ul li #first{color:yellow;}
ul #first{color:red;}
#first{color:blue;}
</style>
</head>

<body>
<ul>
<li id=”first”>一系列选项</li>
<li>一系列选项</li>
<li>一系列选项</li>
<li>一系列选项</li>
</ul>
</body>

显示效果如下（ie6,7,8,ff,opera测试通过）

注意：该css中ul li #first是一种不规范的选择方式，因为li与#first是同级关系，不能使用后代选择器。

内联样式特殊性

内联样式以1开关，在通用的选择器它的优先级高于ID选择器，因此

<li style=”color:yellow;”>一系列选项</li>

将覆盖引入式及嵌入式的样式。

多class样式的特殊性

顽固的ie6居然支持多class样式，令我大跌眼睛。形如<div class=”left page”></div>在解析时两个class相应的样式都会同时起作用，相同的样式后一个class的优先。

<style type=”text/css”>
li{color:gray;}
.a{color:red; font-style:italic;}
.b{color:blue;}
</style>
</head>

<body>
<ul>
<li class=”a b”>一系列选项</li>
</ul>
</body>

效果如下