初學者指南:深入了解 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 規則應用到同一個元素時,優先度最高的規則會生效。
優先度可以根據以下規則計算:
- 行內樣式(inline style):優先度最高的樣式,即直接寫在 HTML 標籤內的樣式。
這些樣式的優先度超過任何 CSS 選擇器。- 範例:
<div style="color: red;">Text</div>
- 優先度:1000
- 範例:
- ID 選擇器:使用
#id
的選擇器。每個 ID 選擇器的優先度為 100。 - 類別選擇器、屬性選擇器和偽類(class、attribute、pseudo-class):這些選擇器的優先度為 10。
- 範例:
.className
、[type="text"]
、:hover
- 範例:
- 元素選擇器和偽元素(element、pseudo-element):元素名稱如
h1
、p
等的選擇器。它們的優先度為 1。- 範例:
p
、h1
、::before
- 範例:
- 全局選擇器(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 優先度是基於選擇器的類型來進行計算的。可以把它理解成一個「數值」來進行比較。
優先度的數值計算規則:
- 行內樣式:權重為 1000。
- ID 選擇器:權重為 100。
- 類別選擇器、屬性選擇器、偽類:權重為 10。
- 元素選擇器、偽元素:權重為 1。
- 全局選擇器(
*
):權重為 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 優先度的問題時,有幾個技巧可以幫助你:
- 盡量減少使用
!important
:除非真的需要強制覆蓋某個樣式,否則應該避免使用它,這樣可以保持樣式的可控性。 - 利用層次結構:通過增加選擇器的層次結構,可以提高優先度,但不應過度嵌套,避免樣式難以維護。
- 合理使用類別和 ID 選擇器:盡量使用類別選擇器來設定樣式,ID 選擇器應該謹慎使用,因為它們的優先度過高,可能會導致難以覆蓋的樣式。
結語
理解 CSS 選擇器優先度是掌握 CSS 的基礎之一。
透過學會如何計算優先度,你可以更好地控制樣式的應用,避免樣式衝突帶來的混亂。
在編寫樣式表時,遵循清晰的層次結構,適當運用類別和 ID,並謹慎使用 !important
,這樣可以幫助你寫出更簡潔且易於維護的 CSS 程式碼。