強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)


(點上圖可開啟高清版本)

CSS 權重表來自於今年的 CSS DevConf,利用漫畫「圖+文」的表現方式,清楚的讓大家知道 CSS 的權重。
如果你搞不清楚 CSS selector, element, class, id, style 之間的權重關係,那麼你真的需要收藏這個網站的這張圖!(沒錯,這個網站就只有這張圖 XD)

雖然都是英文,可是透過這樣的表現手法,大家應該可以清楚的了解權重區分,假使你還是似懂非懂,可以參考我寫的簡單說明。

閱讀順序

  • 從上至下
  • 由左至右

▼ 圖解如下,後面的依此類推。
css specificity 閱讀步驟

閱讀說明

可以看到每個小圖周圍都有 3 個文字說明區塊:

  1. 9 elements
    • 表示你在 CSS 裡寫了 9 個元素,也就是寫了 9 層去指定最後一個元素的樣式。
  2. body div … ul li p a
    • 把圖解改成 CSS 語言,這個位置顯示的是我們在設定 CSS 樣式時候的寫法。假設你要設定a的連結顏色,但為了避免跟其他的a樣式衝突,你也許會一層一層寫下來,像這樣:body div article section div ul li p a來確保只會更改到這個a的顏色。
  3. 0 – 0 – 9
    • 數字愈大權重愈高,層級愈高權重愈高
    • 以 0 – 0 – 9 跟左邊的 0 – 0 – 2 相比,0 – 0 – 9 的權重會大於 0 – 0 – 2;
    • 以 0 – 0 – 9 跟下面的 0 – 1 – 0 相比,0 – 0 – 9 的權重會小於 0 – 1 – 0;
  4. 愈後面的圖片權重愈高

如果看得懂這張圖,應該會覺得!important的漫畫會讓你嘴角上揚吧 XD,超有趣的圖解。

初學者撰寫 CSS 的時候,常常會因為這個蓋了那個設定、那個蓋了這個設定,結果永遠搞不清楚到底哪個要蓋哪個而感到焦躁不已,最後通通給我採用!important暴力法,每次看了都哭笑不得 XD。
所以我誠心推薦你們可以收藏這個網站,也可以把圖片印出來隨時對照,以後就可以寫出簡潔卻能顧到權重的 css code 囉:)