【分享】说说标准——关于样式的特殊性

本文简单的介绍下何为选择器的特殊性，它是起什么作用的，以及特殊性怎么计算方面的知识。

所谓的特殊性是指，作用于同一元素的同一特性 (property)的不同选择器的多个值，哪个会起作用，特殊性值最高的会起作用。比如，如下代码中，多个样式中的 'background-color' 同时作用于同一个 DIV 元素，那么最后，到底 DIV 应该会是什么颜色呢？

HTML code

   
   

    
    <!
    
    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
    
    >
   
   

  

我们先来看一下特殊性的计算规则。

特殊性的值可以看作是一个由四个数组成的一个组合，用a，b，c，d来表示它的四个位置。依次比较a，b，c，d这个四个数比较其特殊性的大小。比如，a值相同，那么b值大的组合特殊性会较大，以此类推。注意，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 code

   
   

    
     *             {}  /* 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 */


    
    <
    
    HEAD
    
    >
    
    

    
    <
    
    STYLE 
    
    type
    
    ="text/css"
    
    >
    
    
  #x97z 
    
    {
    
     color
    
    :
    
     red 
    
    }
    
    

    
    </
    
    STYLE
    
    >
    
    

    
    </
    
    HEAD
    
    >
    
    

    
    <
    
    BODY
    
    >
    
    

    
    <
    
    P 
    
    ID
    
    =x97z 
    
    style
    
    ="color: green"
    
    >
    
    

    
    </
    
    BODY
    
    >
    
    

   
   

现在，让我们回到一开始的例子，计算下各个样式的特殊性的值：

HTML code

   
   

    
    <!
    
    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
    
    >
   
   

  

可见，‘#c1 #c2 div.con ’的特殊性最高，是[0,2,1,1]，那么背景色应该是黄色才对。打开浏览器测试一下，发现，果然是黄色，很神奇吧：）

关于特殊性的计算具体细节，请参考W3C CSS2.1 6.4.3 Calculating a selector's specificity。

原文地址：

http://topic.csdn.net/u/20100630/15/b1aadda3-7842-447f-985a-81fccf64d4f2.html?57968