在前面的 28 天，我們介紹了多種選擇器，包括基本選擇器、複合選擇器、偽類選擇器、偽元素，接下來要進入到樣式的優先級（Specificity），本篇文章將會先以基本選擇器來說明，並理解優先級對於編寫可維護的 CSS 至關重要。

💠 哪時候會使用到優先級?

當一個元素符合多個選擇器的條件，並且這些選擇器為同一屬性設置了不同的值時，瀏覽器會根據優先級決定應用哪個樣式。如果沒有衝突，則會自動沿用原樣式。

💠 樣式的優先級順序

優先級的順序依據選擇器的權重決定。我們來看看一些常見的選擇器範例，並列出它們的權重排名：

<h2 class="h2" id="h2" style="color: green">Lala Code</h2>

* {
	color: red;
}

.h2 {
	color: orange;
}

h2 {
	color: gold;
}

#h2 {
	color: skyblue;
}

在這段程式碼中，我們為同一個 <h2> 元素分別使用了通用選擇器（*）、類選擇器（.h2）、元素選擇器（h2）和 ID 選擇器（#h2），並加上了行內樣式 style="color: green"。

最終應用的樣式顯示為綠色，這是因為行內樣式的優先級最高。

當行內樣式被移除後，會應用 ID 選擇器的樣式，因為 ID 選擇器的優先級高於其他選擇器。

<h2 class="h2" id="h2">Lala Code</h2>

總結來看，優先級的排序為：

行內樣式 > ID 選擇器 > 類選擇器 > 元素選擇器 > 通用選擇器

優先級順序範例：［CODEPEN］

💠 !important：強制應用樣式

由上面的範例，我們可以知道「行內樣式」權重大於所有選擇器，而其實還有比行內樣式更高的，就是 !important。
加上 !important 關鍵字後，即使有其他更高權重的選擇器，最終的樣式依然會是帶有 !important 的樣式。

例如在剛剛的範例中，元素選擇器 h2 加上 !important

* {
	color: red;
}

.h2 {
	color: orange;
}

h2 {
	color: gold !important;
}

#h2 {
	color: skyblue;
}

無論其他選擇器樣式如何或是否有行內樣式，<h2> 的顏色都將呈現為金黃色，因為 !important 的權重最高。

💠 總結

• 樣式優先級由高到低依次為：行內樣式 > ID 選擇器 > 類選擇器 > 元素選擇器 > 通用選擇器。
• 使用 !important 可以強制應用樣式，超越所有其他選擇器。
• 理解 CSS 樣式的優先級有助於撰寫乾淨、可維護的程式碼，避免樣式衝突。

本文將同步更新至 Lala Code