什麼是 CSS 權重？

簡單說，CSS 權重就是 當多個規則套用到同一個元素時，誰的優先級比較高。
就像班上同時有班長、老師、校長給你指令，你得先聽誰的。

權重計分規則

CSS 權重其實有一套計分方式，從高到低依序是：

1. 行內樣式（Inline Style）

例：

權重最高，幾乎無人能敵（除了 !important）。

2. ID 選擇器

例：#title {}

每個 ID 加 100 分。

3. 類別（Class）、屬性（Attribute）、偽類（Pseudo-class）

例：.btn {}, [type="text"], :hover

每個加 10 分。

4. 標籤（Element）、偽元素（Pseudo-element）

例：div {}, p::after

每個加 1 分。

5. 通用選擇器 *、繼承樣式

沒什麼分數，基本上是墊底的。

舉例說明
假設 HTML：

<p id="main" class="highlight">Hello</p>

CSS：

p { color: blue; }             /* 分數 = 1 */
.highlight { color: green; }   /* 分數 = 10 */
#main { color: red; }          /* 分數 = 100 */

結果 的顏色會是 紅色，因為 #main 權重最高（100 分）。

同分時怎麼辦？
如果兩個規則的權重一樣，後面寫的會蓋掉前面寫的：

CSS
.highlight { color: green; }
.highlight { color: orange; } /* 後面寫的贏 */

結果會是 橘色。

!important 大魔王

加上 !important，會直接蓋掉幾乎所有規則（除非另一個也有 !important，那就再比權重分數）。

CSS
p { color: blue !important; }
#main { color: red; }

結果會是 藍色，因為 !important 抢頭香。

生活比喻

把 CSS 權重想像成「朋友聚餐的決定權」：

-行內樣式：本人拍板說去哪（最大）。

-ID：好朋友的強烈建議（很大影響力）。

-Class：朋友群的共識（影響力中等）。

-Tag：路人甲的意見（可以參考，但不一定採用）。

結論

熟悉權重規則能幫你少踩坑，尤其在專案大時，光會寫 CSS 還不夠，得知道誰蓋誰，才能保持樣式的穩定。