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 囉：)

4

1

發生錯誤。

更多 CSS 相關文章

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

2023-12-06

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

HTML/CSS

vw 進化了！更好用的 CSS 自適應字體大小

2023-10-13

vw 進化了！更好用的 CSS 自適應字體大小

HTML/CSS

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

2023-09-13

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

HTML/CSS

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

2023-06-26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

HTML/CSS

用 CSS 製作垂直滾動的跑馬燈

2023-04-13

用 CSS 製作垂直滾動的跑馬燈

HTML/CSS

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS