前端面試題：CSS中的選擇器權重

CSS中選擇器優先級的權重計算

先看一段代碼，如下：

  <style>
    a{
      color: red;
    }
    #box a{
      color: green;
    }
    [class="box"] a{
      color: gold;
    }
    .box a{
      color: brown;
    }
    p a{
      color: yellow;
    }
  </style>
  <p id='box' class="box"> <a>hello</a></p>

請問上面代碼中，a標籤中文字的最終顏色是什麼？知道CSS選擇器優先級規則的童鞋都知道，在CSS中優先級順序如下：

ID選擇器 > class選擇器 > tag選擇器
所以，上面代碼的顏色，大家都會選擇 #box a{ color: green;} 綠色。這個答案沒錯。 如果我們把這一條規則從style標籤中移除呢，那麼a標籤文字的顏色應該是哪個？ brown? or gold? Which one?

答案是： brown。

a{color:red} 和 p a {color : yellow;}的優先級肯定沒有其它兩項高，不需要考慮。在 [class="box"] a和.box a中，後者的順序比較考後，會覆蓋之前的樣式，所以顏色是brown。

這也許會是一些人的答案，不能不說不對。那麼如果這中情況下呢？

  <style>
    #box{
      color: green;
    }
  </style>
  <p id='box' class="box" style="color: red;"> hello </p>

不用說，大家都知道會使用style="color: red;"屬性定義的顏色，是red。

那麼，css所遵從的具體規則是什麼呢？

權重計算規則

1. 第零等：!important， 大過了其它任何設置。
2. 第一等：代表內聯樣式，如: style=””，權值爲1000。
3. 第二等：代表ID選擇器，如：#content，權值爲0100。
4. 第三等：代表類，僞類和屬性選擇器，如.content，權值爲0010。
5. 第四等：代表類型選擇器和僞元素選擇器，如div p，權值爲0001。
6. 第五等：通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
7. 第六等：繼承的樣式沒有權值。

計算規則

!important 和內聯樣式style都屬於不講理的那種，

• 只要存在 !important，!important便具有最高優先級；
• 如果不存在 !important，存在style，那麼style便具有最高優先級；
• 剩下的 “ID” 、 “類，僞類和屬性” 、 “元素類型和僞元素“ 分別對應 權重值（0-a-b-c）中的 a/b/c；計算方法如下：

*               /* a=0 b=0 c=0 -> specificity = 0-0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-0-1 */
UL LI           /* a=0 b=0 c=2 -> specificity = 0-0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-0-1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity = 0-0-1-3 */
LI.red.level    /* a=0 b=2 c=1 -> specificity = 0-0-2-1 */
#x34y           /* a=1 b=0 c=0 -> specificity = 0-1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 0-1-0-1 */

• 繼承的樣式沒有權值，比其它任何類型的權值都低。

【參考資料】

CSS selector specificity