关于CSS样式优先级

一、什么是CSS的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，
对于网站重构的时候特别有用，如果你有使用Firebug，那么你就会看到CSS样式的选择优先级了，
下面让我们来看看浏览器是怎么计算的。

选择符                                           权重值
--------------------------------------------------
每个id选择符(#id)                            0100
每个class选择符(.class)                    0010
每个元素或伪元素                             0001
直接写在HTML标签style属性上            1000

有了这个计算表格后，我们举个例子

<html>
    <head>
        <title>样式优先级</title>
        <style type="text/css">
            span{color:#ff0000;}/*0001*/
            h3 span{color:#ff1111;}/*0002*/
            .box-class span{color:#ff2222;}/*0011*/
            #box-id span{color:#ff3333;}/*0101*/
            .box-class .title span{color:#ff4444;}/*0021*/
            .box-class h3 span{color:#ff5555;}/*0012*/    
            .span{color:#000000 !important;}/*0010 添加important后为最高级别，一些书上说important在IE6下无用，我自己测试是可以用的*/
        </style>
    </head>
    <body>
        <div id="box-id" class="box-class">
            <h3 class="title">        
                <span class="span" style="color:#ff6666;">测试标题</span>
            </h3>
        </div>
    </body>
</html>

Firebug下显示优先级别：

element.style {color: #FF6666;}

#box-id span {color: #FF3333;}

.box-class .title span {color: #FF4444;}

.box-class h3 span { color: #FF5555;}

.box-class span {color: #FF2222;}

.span {color: #000000 !important;} 

h3 span {color: #FF1111;}

span {color: #FF0000;}
 
需要注意的是，如果添加important 之后 样式的权重就不按照正常情况出牌了（一些书上说important在IE6下无用，我自己测试是可以用的）。
选择器还有一种写法就是.classA.classB  意思 classA与classB需要同时存在，需要注意的是ie6对这种写法不支持，麻烦的IE6。
posted @ 2012-01-07 18:01  script9  阅读(327)  评论(0)    收藏  举报