初學者指南:深入了解 CSS 選擇器優先度

更新日期: 2024 年 10 月 21 日

在學習和使用 CSS(層疊樣式表)的過程中,你可能會遇到樣式沒有按預期應用的情況。

這通常是由於CSS 選擇器的優先度(Specificity)所引起的。

CSS 選擇器優先度決定了當多個樣式衝突時,哪一個樣式會最終被應用。

理解這一概念對於寫出有效且可控的 CSS 至關重要。

本文將為新手介紹 CSS 選擇器的優先度概念,並通過簡單的規則和範例,幫助你理解如何計算優先度,以及如何在實際開發中運用這些知識。


什麼是 CSS 選擇器?

在開始了解優先度之前,我們需要先明白什麼是CSS 選擇器

選擇器是 CSS 的一個部分,它指定了樣式應用到哪個 HTML 元素。

常見的選擇器有:

  • 類別選擇器(Class selector):用於選擇某個特定類別的元素,使用 . 作為前綴。
    • 範例:.button { color: red; }
  • ID 選擇器(ID selector):選擇具有特定 ID 的元素,使用 # 作為前綴。
    • 範例:#header { background-color: blue; }
  • 元素選擇器(Type selector):直接選擇 HTML 標籤。
    • 範例:p { font-size: 16px; }
  • 全局選擇器(Universal selector):選擇所有元素,使用 *
    • 範例:* { margin: 0; padding: 0; }

這些選擇器的組合會影響樣式的應用順序,而這正是優先度概念的核心。


CSS 選擇器優先度的計算規則

CSS 選擇器的優先度,是由多個選擇器的權重來決定的。

當多個 CSS 規則應用到同一個元素時,優先度最高的規則會生效。

優先度可以根據以下規則計算:

  1. 行內樣式(inline style):優先度最高的樣式,即直接寫在 HTML 標籤內的樣式。

    這些樣式的優先度超過任何 CSS 選擇器。
    • 範例:<div style="color: red;">Text</div>
    • 優先度:1000
  1. ID 選擇器:使用 #id 的選擇器。每個 ID 選擇器的優先度為 100。
  2. 類別選擇器、屬性選擇器和偽類(class、attribute、pseudo-class):這些選擇器的優先度為 10。
    • 範例:.className[type="text"]:hover
  1. 元素選擇器和偽元素(element、pseudo-element):元素名稱如 h1p 等的選擇器。它們的優先度為 1。
    • 範例:ph1::before
  1. 全局選擇器(Universal selector):使用 *,選擇所有元素。這個選擇器的優先度最低,為 0。
    • 範例:* { margin: 0; }
    • 優先度:0

計算優先度時,每種選擇器的權重會被累加。


範例:簡單的優先度比較

<style>
  p { color: blue; }         /* 優先度 1 */
  .text { color: red; }       /* 優先度 10 */
  #main { color: green; }     /* 優先度 100 */
</style>

<p id="main" class="text">這是段落文字</p>

在這個範例中,p 元素同時受到了三個樣式的影響,但最終應用的顏色是綠色,因為 #main 的優先度最高(100)。

範例:行內樣式的優先度

<style>
  .highlight { color: blue; } /* 優先度 10 */
</style>

<p class="highlight" style="color: red;">這是段落文字</p>

在這個範例中,即使 .highlight 的優先度為 10,但行內樣式的優先度更高,最終應用的樣式是紅色

範例:全局選擇器的優先度

<style>
  * { color: blue; }         /* 優先度 0 */
  .text { color: red; }       /* 優先度 10 */
  p { color: green; }         /* 優先度 1 */
</style>

<p class="text">這是段落文字</p>

在這個範例中,雖然 * 選擇器設置了顏色為藍色,但由於它的優先度為 0,最終應用的樣式是 .text 的紅色,因為 .text 的優先度為 10,高於 p* 的樣式。


如何計算優先度

CSS 優先度是基於選擇器的類型來進行計算的。可以把它理解成一個「數值」來進行比較。

優先度的數值計算規則:

  1. 行內樣式:權重為 1000。
  2. ID 選擇器:權重為 100。
  3. 類別選擇器、屬性選擇器、偽類:權重為 10。
  4. 元素選擇器、偽元素:權重為 1。
  5. 全局選擇器(*:權重為 0。

這些權重是從左到右排列的,當計算優先度時,只需將各個選擇器的權重相加。當兩個樣式有衝突時,權重更高的那一個樣式將被應用。

範例:多個選擇器組合

<style>
  div p { color: blue; }             /* 優先度 2 (1 + 1) */
  .container p { color: green; }     /* 優先度 11 (10 + 1) */
  #header .container p { color: red; } /* 優先度 111 (100 + 10 + 1) */
</style>

<div id="header" class="container">
  <p>這是段落文字</p>
</div>

在這個範例中,p 標籤受到了三個不同的樣式影響:

  • div p 的優先度是 2(因為有兩個元素選擇器)。
  • .container p 的優先度是 11(類別選擇器優先度 10,加上元素選擇器的 1)。
  • #header .container p 的優先度是 111(ID 選擇器 100,加上類別選擇器 10 和元素選擇器 1)。

由於 #header .container p 的優先度最高(111),最終應用的顏色是紅色


使用 !important 規則

有時你可能會遇到某些情況,希望某個樣式無論如何都要優先於其他規則。

在這種情況下,可以使用 !important 來強制應用該樣式。

範例:使用 !important

<style>
  p { color: blue !important; }
  .text { color: red; }
</style>

<p class="text">這是段落文字</p>

在這個範例中,即使 .text 設置了 color: red;,但由於 p { color: blue !important; },最終應用的顏色是**

藍色**。!important 會覆蓋掉所有優先度較低的規則。

注意事項:

!important 應該謹慎使用,因為它會打破正常的優先度規則,可能導致樣式難以維護。


如何處理複雜的優先度問題

在實際開發中,處理 CSS 優先度的問題時,有幾個技巧可以幫助你:

  1. 盡量減少使用 !important:除非真的需要強制覆蓋某個樣式,否則應該避免使用它,這樣可以保持樣式的可控性。
  2. 利用層次結構:通過增加選擇器的層次結構,可以提高優先度,但不應過度嵌套,避免樣式難以維護。
  3. 合理使用類別和 ID 選擇器:盡量使用類別選擇器來設定樣式,ID 選擇器應該謹慎使用,因為它們的優先度過高,可能會導致難以覆蓋的樣式。

結語

理解 CSS 選擇器優先度是掌握 CSS 的基礎之一。

透過學會如何計算優先度,你可以更好地控制樣式的應用,避免樣式衝突帶來的混亂。

在編寫樣式表時,遵循清晰的層次結構,適當運用類別和 ID,並謹慎使用 !important,這樣可以幫助你寫出更簡潔且易於維護的 CSS 程式碼。


參考資料

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *