CSS 權重表來自於今年的 CSS DevConf，利用漫畫「圖+文」的表現方式，清楚的讓大家知道 CSS 的權重。

如果你搞不清楚 CSS selector, element, class, id, style 之間的權重關係，那麼你真的需要收藏這個網站的這張圖！(沒錯，這個網站就只有這張圖 XD)

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

閱讀順序

• 從上至下
• 由左至右

▼ 圖解如下，後面的依此類推。

閱讀說明

可以看到每個小圖周圍都有 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 囉：)

7

2

發生錯誤。