深刻理解CSS選擇器優先級

題外話

今天把 《CSS REFACTORING》（中文名叫《CSS重構：樣式表性能調優》）電子書粗略的瀏覽了一遍，這本書很薄，150頁左右，首先是介紹了什麼是重構並舉了兩個簡單的重構例子，而後介紹了CSS的選擇器優先級，再而後介紹了CSS的最佳實踐， 再而後就介紹如何重置瀏覽器的默認樣式，最後比較虛的、純理論的介紹了CSS重構的策略，而後就沒有而後了。這書總體內容很簡單，可是，其中對於 CSS選擇器優先級計算 做了比較深刻的講解。

什麼是選擇器優先級（Specificity）

直接複製了MDN對優先級的定義 上的解釋：

瀏覽器經過優先級來判斷哪一些屬性值與一個元素最爲相關，從而在該元素上應用這些屬性值。優先級是基於不一樣種類選擇器組成的匹配規則。

這句話也是很抽象，暫且先無論它了。可是咱們能夠先看一個例子：

• HTML:

<div id="content" class="content">
我是什麼顏色
</div>

• CSS：

#content {
    color: #f00;
}
.content {
     color: #0f0;
}

那最後文字是什麼顏色呢？答案很簡單：紅色。這就涉及到了優先級問題，同一塊內容，咱們同時用了 ID選擇器 和 類選擇器,由於 ID選擇器 優先級大於 類選擇器 , 因此最終顯示爲紅色。

優先級的計算規則

相信每位寫過CSS的朋友都知道，CSS選擇器的優先級關係是:

內聯 > ID選擇器 > 類選擇器 > 標籤選擇器。

可是，瀏覽器具體的優先級算法是怎樣的？可能還有些人不知道 。《CSS REFACTORING》 中提到了算法的過程 。

A specificity is determined by plugging numbers into (a, b, c, d):

1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
2. b is equal to the number of ID selectors present.
3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
4. d is equal to the number of type selectors and pseudoelements present.

翻譯過來就是

優先級是由 A 、B、C、D 的值來決定的，其中它們的值計算規則以下：

1. 若是存在內聯樣式，那麼 A = 1, 不然 A = 0;
2. B 的值等於 ID選擇器 出現的次數;
3. C 的值等於 類選擇器 和 屬性選擇器 和 僞類 出現的總次數;
4. D 的值等於 標籤選擇器 和 僞元素 出現的總次數 。

這樣子直接看好像也仍是很明白 ，那先上個例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

1. 由於沒有內聯樣式 ，因此 A = 0;
2. ID選擇器總共出現了1次， B = 1;
3. 類選擇器出現了1次， 屬性選擇器出現了0次，僞類選擇器出現0次，因此 C = (1 + 0 + 0) = 1；
4. 標籤選擇器出現了3次， 僞元素出現了0次，因此 D = (3 + 0) = 3;

上面算出的A 、 B、C、D 能夠簡記做：(0, 1, 1, 3)。

爲了熟悉掌握優先級算法 ，咱們再來作一些練習：

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

OK， 如今已經弄清楚了優先級是怎麼算的了。可是，還有一個問題，怎麼比較兩個優先級的高低呢？
比較規則是: 從左往右依次進行比較 ，較大者勝出，若是相等，則繼續往右移動一位進行比較 。若是4位所有相等，則後面的會覆蓋前面的

再來看一下例子：

• html:

<div class="nav-list" id="nav-list">
    <div class="item">nav1</div>
    <div class="item">nav2</div>
</div>

• CSS：

#nav-list .item {
    color: #f00;
}

.nav-list .item {
    color: #0f0;
}

算出 #nav-list .item 的優先級是 (0, 1, 1, 0), .nav-list .item 的優先級是 (0, 0, 2, 0)。 左邊第一位都是0， 再看看左邊第二位，前者是1，後者是0， 因此（0, 1, 1, 0） 的大於 (0, 0, 2, 0) ，即 #nva-list .item 大於 .nav-list .item，因此字體會是紅色。

優先級的特殊狀況

通過上面的優先級計算規則，咱們能夠知道內聯樣式的優先級是最高的，可是外部樣式有沒有什麼辦法覆蓋內聯樣式呢？有的，那就要 !important 出馬了。由於通常狀況下，不多會使用內聯樣式 ，因此 !important 也不多會用到！若是不是爲了要覆蓋內聯樣式，建議儘可能不要使用 !important 。、

那可能有人會想，那若是我內聯樣式用了 !important，是否是外部樣式就沒有辦法了呢？好比下面的代碼：

• HTML:

<div class="app" style="color:#f00!important">666</div>

• CSS:

.app {
    color: 0f0!important;
}

是的，你贏了，這時候內聯樣式已經強大到無論你外部樣式怎麼寫都沒法覆蓋它了。這種狀況在實際代碼中是要杜絕的！記住，千萬不要在內聯樣式中使用 !important

最後 ， !important 真的是的沒法超越的王者嗎？其實不是的，一些狀況，咱們能夠超越 !important, 請看下面的例子：

• html:

<div class="box" style="background: #f00; width: 300px!important;"><div>

• css:

.box {
    max-width: 100px;
}

這時候 .box 的寬度只有 100px , 而不是 300px, 可見，max-width 能夠超越 width!important!可是，這實際上不是優先級的問題，由於優先級是比較相同屬性的，而 max-width 和 width 是兩個不一樣的問題。之因此舉這個例子，是要告訴你們，有時候無論怎麼設置容器的 width 都不生效，檢查一下是否是有人寫了 max-width 坑了你哈。

OK，優先級先寫到這裏啦，朋友們有問題歡迎留言討論~