关于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>效果如下
ie8下
ie6下正常！
!important
CSS2.1中!important称为重要声明，它在声明的结束分号之前插入。表示该样式什么重要。如color:#f00 !important;表示color:#f00十分重要。
这里又讲到了ie6（这个浏览器对前台人员来说臭名昭著），ie6不支持该声明；因此众多的前台人员借助!important来处理ie6在页面表现上的bug，这就称为css hack。以下举例说明：
<style type="text/css">
p{color:#d00 !important; color:#00f;background:#ccc !important;}
</style>
</head><body>
<p>这是一段非常重要的文本</p>
</body>
各浏览器效果如下
最后说明一下，在我布局中基本上没有使用css hack也能保证各浏览器显示基本一致，我发现各之所以布局混乱更多是前台人员没有认真理解各浏览器在解析css的不同之处。一家之言，欢迎拍砖，有时间详解。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
