CSS - 特殊性

親愛的學生們，歡迎你們踏上CSS特殊性令人興奮的旅程！作為一位具有多年經驗的鄰居電腦老師，我非常高興能夠引導你們了解這個關鍵概念。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或者茶，如果你喜歡的話），讓我們開始吧！

CSS特殊性 - 選擇器權重分類

想象一下CSS特殊性就像是一場選擇器之間的人氣比賽。每個選擇器都有自己的「權重」或重要性，權重最高的選擇器獲勝，有權為元素設置樣式。這就像學校裡的酷炫孩子——越酷，影響力越大！

選擇器權重分為四個主要類別，從高到低：

1. 行內樣式
2. ID
3. 類別、屬性和偽類
4. 元素和偽元素

讓我們詳細看看這些類別。

CSS特殊性 - 每種選擇器的得分

為了讓事情更易於理解，我們可以為每種選擇器類型分配積分。把它當作一場遊戲，每個選擇器根據其重要性獲得積分。這裡有一個方便的表格來記憶：

選擇器類型	擁有積分	範例
行內樣式	1000	<p style="color: red;">
ID	100	#header
類別、屬性、偽類	10	.button、[type="text"]、:hover
元素和偽元素	1	p、::before

現在，讓我們通過一些代碼範例來看看這是怎樣運作的：

/* 特殊性：1 */
p {
color: blue;
}

/* 特殊性：10 */
.text {
color: red;
}

/* 特殊性：100 */
#main-heading {
color: green;
}

在這個例子中，如果我們有一個元素如 <p id="main-heading" class="text">Hello, World!</p>，文字顏色會是綠色，因為ID選擇器具有最高的特殊性。

CSS特殊性 - 例外情況

現在，你可能會想，「但是老師，這些規則有例外嗎？」問得好！確實有一個主要例外：!important 聲明。

當你為一個屬性添加 !important 時，它會成為最終的勝利者，無論特殊性如何。這就像在Monopoly遊戲中擁有一張「獲得自由出獄」的卡片——謹慎使用！

p {
color: blue !important;
}

#main-heading {
color: green;
}

在這種情況下，即使ID選擇器具有更高的特殊性，p 選擇器上的 !important 規則也會使文字顏色為藍色。

CSS特殊性 - 處理問題

有時候，你可能會發現自己陷入了特殊性困境。別擔心；這對於我們中最優秀的人來說也會發生！以下是一些處理特殊性問題的建議：

1. 除非絕對必要，否則避免使用 !important。
2. 在可能的情况下，嘗試使用類別而不是ID。
3. 注意你的選擇器結構，並試著保持簡單。
4. 如果你對選擇器的權重不確定，可以使用特殊性計算器。

CSS特殊性 - 須記住的要點

讓我們回顧一些關於CSS特殊性的關鍵要點：

1. 特殊性是根據選擇器的組成部分來計算的。
2. 行內樣式始終具有最高的特殊性（除非被 !important 覆蓋）。
3. ID的特殊性高於類別，類別的特殊性高於元素。
4. 選擇器越特殊，其特殊性越高。
5. 當特殊性相等時，解決方法是看聲明的順序（詳見下一節）。

CSS特殊性 - 相同特殊性（後聲明的獲勝）

當兩個選擇器具有相同的特殊性時，CSS文件中排在後面的選擇器獲勝。這就像一場比賽的終點線——最後越過終點的選手獲得獎勵！

.button {
background-color: blue;
}

.button {
background-color: red;
}

在這個例子中，按鈕會是紅色，因為它是最後一個聲明。

CSS特殊性 - 特殊性等級（行內樣式）

行內樣式是特殊性方面的重量級冠軍。它們具有1000的特殊性，這高於你的樣式表中的任何選擇器。例如：

<p style="color: red;" class="blue-text" id="green-text">我是什么顏色？</p>

#green-text {
color: green;
}

.blue-text {
color: blue;
}

在這種情況下，文字會是紅色，因為行內樣式優於ID和類別選擇器。

CSS特殊性 - 特殊性等級（ID聲明）

在行內樣式之後，ID選擇器居於最高地位。它們具有100的特殊性，這超過了類別和元素。讓我們看一個例子：

<p id="special-paragraph" class="normal-text">我是一個特殊的段落！</p>

#special-paragraph {
color: purple;
}

.normal-text {
color: black;
}

p {
color: blue;
}

在這裡，文字會是紫色，因為在CSS規則中，ID選擇器具有最高的特殊性。

CSS特殊性 - 特殊性等級（類別聲明）

類別選擇器在我們的等級中排在下一位，具有10的特殊性。它們比元素選擇器更特殊，但不如ID選擇器。例如：

<p class="highlight">這是一個突出顯示的段落。</p>

.highlight {
background-color: yellow;
}

p {
background-color: white;
}

在這個例子中，段落會有黃色背景，因為類別選擇器的特殊性高於元素選擇器。

CSS特殊性 - 特殊性等級（使用！important規則）

最後但同樣重要的是，讓我們來谈谈核選擇：!important。這個聲明會覆蓋所有其他聲明，無論其特殊性如何。這就像在你的CSS牌組中有一張「王牌」。

p {
color: blue !important;
}

#special-paragraph {
color: red;
}

.highlight {
color: green;
}

如果我們將這些樣式應用於一個段落，它會是藍色，即使它具有ID special-paragraph 或類別 highlight，也是因為 !important 規則。

至此，親愛的各位！我們已經涵蓋了CSS特殊性的來龍去脈。記住，有了偉大的特殊性，就有了偉大的責任。謹慎使用你新學到的知識，願你的樣式總是具有特殊性，你的選擇器總是清晰！

Credits: Image by storyset