CSS:權重和層疊規則決定了其優先順序

標籤：css

來源：http://www.ido321.com/1063.html

首先，給大家看一篇關於CSS優先順序的樣本：http://www.ido321.com/76.html

一、基本的優先順序規則

        比較同一層級的個數，數量多的優先順序高，如果相同即比較下一層級的個數，至於各層級的優先順序如下：

         important > 內聯 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽對象 >  萬用字元 > 繼承

二、CSS權重規則

       在《頁面重構中的模組化設計》中提到，影響CSS樣式權重，有兩個重要因素：

            A：樣式的優先順序跟樣式定義的順序有關

            B：權值的大小跟選取器的類型和數量有關

       一般來說，在同一個CSS檔案中，如果有兩個同名的樣式，則後定義的會覆蓋先定義的。選取器類型的優先順序見(一)。

       那麼，CSS的權重是怎麼算的呢？

       一個selector的權重表示方式：0.0.0.0，按照計算規則給每位填充數字，對應位置相等，則比較下一位。

       權重的計算規則如下：（為方便，用A.B.C.D代替各位置的值）

        1、內嵌樣式：A=1，B=C=D=0（即1.0.0.0）

          2、ID樣式：selector中帶幾個ID,第2位就加幾個1 如#header{color:red}，就是A=C=D=0,B=1(即0.1.0.0)

          3、類,偽類,以及屬性的個數就是第三位的值：

                .a.b[type="text"]:hover{}，選取器中有2個類,1個屬性,1個偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)

           4、虛擬元素和標籤元素的個數就是第四位的值

                 p:first-letter，有一個標籤元素p和虛擬元素first-letter,值為2,A=B=C=0,D=2（即0.0.0.2）

           5、萬用字元和繼承得到的CSS屬性對權重沒有影響

三、幾個樣本

        針對以上，看以下幾個樣本

         1、.a .b .c {color:red;}   //0.0.3.0   說明：只有三個類

         2、*{…}         //0.0.0.0    說明：萬用字元對權重沒有影響

         3、.a .b a {color:green} //0.0.2.1     說明：兩個類和一個標籤

         4、#hid {color:black;}   //0.1.0.0  說明：只有一個ID

下一篇：HTML 5 History API的”前生今世”

CSS:權重和層疊規則決定了其優先順序