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

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

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

💠 樣式的優先級順序

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

1	<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 選擇器的優先級高於其他選擇器。

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

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

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

優先級順序範例：［CODEPEN］

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

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

* {
  color: red;
}

.h2 {
  color: orange;
}

h2 {
  color: gold !important;
}

#h2 {
  color: skyblue;
}

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

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。