CSS基礎 Specificity權重（優先順序）

正文權重計算

結語前面我已經寫過乙個css 基礎：selector 選擇器，介紹了 css 裡面最重要的選擇器，接下來本篇將要介紹 css 是如何計算選擇器的權重。

有時候你寫 css 的時候會發現，我寫的樣式怎麼沒有生效？原來是同時存在多個同樣的定義，那為什麼是另乙個覆蓋這乙個呢？瀏覽器是如何決定套用哪個樣式呢？其實瀏覽器在解析 css 樣式表的時候會為每個樣式前的選擇器計算乙個權重，如果同個元素出現相同的屬性定義，就會比較權重，套用權重較高的一方的樣式；而當權重相同的時候，後面宣告的樣式將會覆蓋前面的樣式。接下來就讓我們實際來看看 css 的權重是如何計算的吧。

day20：小事之 css 權重 (css specificity)

優先順序我們可以依據引入方法和選擇器型別進行兩種分級

css 引入的方法可以分成三種：

內聯樣式(inline)：寫在標籤的style屬性內

style
="display
: block;
">
div>

內部樣式(internal)：寫在 html 檔案的標籤內

>
div>
>
divstyle
>

外部樣式(external)：寫在外部.css檔案，並透過標籤引入


ref=
"stylesheet"
href
="index.css"
>
link
>

/* index.css */

div

三種樣式的優先順序順序是：內聯(inline)>內部(internal)>外部(external)

不過都 2020 年了，應該也很少人使用內部樣式表來編寫 css，因此我們可以將所有樣式表粗略的分為內聯和外部樣式表兩種

這邊使用的選擇器型別請參考我的前一篇css 基礎：selector 選擇器

在以引入方式計算優先順序之前，會先比較由選擇器型別決定的權重(specificity)。請原諒我這邊決定使用權重(specificity)，因為比起優先順序(priority)通常只有乙個值來比大小，css 權重的計算更像是計算各部位的特徵做加總後，最後得到的乙個總和。

!important內聯樣式(inline)(style="...")

id 選擇器(#idname)

class 選擇器(.classname)、屬性選擇器([attr="value"])、偽類(:pseudo-class)

元素選擇器(tagname)、偽元素(::pseudo-element)

以下我們使用這樣的形式來表示計算後的權重，四個值分別表示四個等級的選擇器型別：

0.0.0.0
高 -> 低

這邊主要計算上面提到的選擇器型別的權重計算，注意>、~、+、`` 等運算子是不影響權重計算的。

在介紹四個等級的權重值之前，我們先來考慮全域性樣式（也就是使用萬用字元*）。由於萬用字元的目的在於匹配任何元素，所以他的權重需要比任何樣式都低（也就是全部為 0）：

0.0.0.0

第四級的優先順序有兩種選擇器：

元素選擇器(tagname)

偽元素(::pseudo-element)

0.0.0.1

第**的優先順序有三種選擇器：

class 選擇器(.classname)

屬性選擇器([attr="value"])

偽類(:pseudo-class)

0.0.1.0

第二級的優先順序只有一種選擇器：

id 選擇器(#idname)

0.1.0.0

這邊我們也把內聯樣式單獨劃為乙個等級：

內聯樣式(inline)(style="...")

1.0.0.0

這個型別屬於比較特殊的等級，他擁有最高的優先順序，會覆蓋所有其他四種等級的選擇器型別，用法如下：

div

但是在此基礎之上還是能夠比較其他四個等級的優先順序，因此我們可以把它的權重看成：

1.0.0.0.0

**注意！**總是使用!important來覆蓋優先順序是強烈不推薦的，相反的應該優先使用更具體的宣告；也不建議在自定義的元件庫或全域性樣式使用!important，因為這樣往後的使用者想要覆蓋屬性的時候也必須加上!important，將會強烈破壞樣式宣告結構和可讀性。

其實很簡單吧，簡單來說越具體（同乙個樣式指定越多限制），權重當然就會越大。以下舉一些選擇器的權重計算的例子：

ul > li
/* 2 個 level4，權重為 0.0.0.2 */
body div ul li a span
/* 6 個 leve4，權重為 0.0.0.6 */
li.myclass
/* level4 * 1 + level3 * 1 = 0.0.1.1 */
li.myclass ~ li
/* level4 * 2 + leve3 * 1 = 0.0.1.2 */
/* 兩個 element 加上乙個 class ，所以是 0-0-1-2 */
form input[type='email']
/* leve4 * 2 + level3 * 1 = 0.0.1.2 */
/* level4 * 2 + level3 * 3 + level2 * 1 + !important = 1.0.1.3.2 */

就這樣，沒了，真的沒了。

其實 css 權重的計算真的沒有很複雜，有時候你可以在引用 ui 元件庫的時候為了調樣式調到頭破血流。這時候你可能要反思一下是 ui 元件庫本身限制了一些屬性的使用，還是你的 css 使用方法或是觀念出現問題。debug 的時候從來都是先重現、定位問題再針對性地解決，尤其是在 css 這種並不那麼明顯的表現出生效的樣式（當然有可能有些工具提供了支援）。**切記！**絕對不可以盲目的除錯 css 程式碼，看起來沒事了就當沒問題了，這樣極有可能在不同瀏覽器、不同解析度、甚至僅僅只是不同的縮放情況下出現樣式大幅度跑位的嚴重問題！

CSS基礎 Specificity權重（優先順序）

css學習 css基礎

CSS基礎使用CSS變數

CSS基礎之 CSS基礎知識 1

CSS基礎 Specificity權重（優先順序）

css學習 css基礎

CSS基礎 使用CSS變數

CSS基礎之 CSS基礎知識 1

相關推薦

CSS基礎使用CSS變數