CSS实例教程:CSS Selector的优先级

上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！

猜一下

    
            01
            <!DOCTYPE HTML> 
        
            02
            <html> 
        
            03
            <head> 
        
            04
            <meta charset="utf-8"> 
        
            05
            <style type="text/css"> 
        
            06
            body{font-family: "Microsoft YaHei";} 
        
            07
            .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;} 
        
            08
            #b{color:green;} 
        
            09
            </style> 
        
            10
            </head> 
        
            11
            
            12
            <body> 
        
            13
            <div class="a1"> 
        
            14
            <div class="a2"> 
        
            15
            <div class="a3"> 
        
            16
            <div class="a4"> 
        
            17
            <div class="a5"> 
        
            18
            <div class="a6"> 
        
            19
            <div class="a7"> 
        
            20
            <div class="a8"> 
        
            21
            <div class="a9"> 
        
            22
            <div class="a10"> 
        
            23
            <div class="a11" id="b"> 
        
            24
            CSS Selector的优先级 
        
            25
            </div> 
        
            26
            </div> 
        
            27
            </div> 
        
            28
            </div> 
        
            29
            </div> 
        
            30
            </div> 
        
            31
            </div> 
        
            32
            </div> 
        
            33
            </div> 
        
            34
            </div> 
        
            35
            </div> 
        
            36
            </body> 
        
            37
            </html>

答案很明显就是你看到的那样儿，究竟为什么一时又很难说的清楚。

今天突然想到精通css里讲到过关于css特殊性的计算，原来是酱紫的…

所有的selector都被分配一个数值（包含内联），将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算，而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级：a,b,c,d可将a看成是最高位以此类推

网页重构分类目录。将固定链接加入收藏夹。 -->

«
»