CSS - 擬似類別

擬似類別是什麼？

大家好，未來的 CSS 工匠們！今天，我們將進入 CSS 擬似類別的神奇世界。現在，不要讓這個花俏的術語嚇到你——我保證它並不像聽起來那麼複雜。事實上，一旦你掌握了它，你將會像專家一樣快速使用擬似類別！

那麼，擬似類別到底是什麼呢？想像一下你有一個超能力，能讓你根據元素在網頁上的狀態或條件來樣式化它們。這就是擬似類別所做的！它們讓你能夠根據用戶是否將鼠標悬停在其上、它們是否為列表中的第一個子元素，甚至頁面的語言是什麼等條件應用樣式。

語法

在我們深入研究特定的擬似類別之前，先快速了解一下語法。其實非常簡單：

選擇器:擬似類別 {
屬性: 值;
}

看到選擇器後面的冒號（:）了嗎？這就是你知道你在處理擬似類別的方式。簡單吧？

擬似類別 Hover

我們先從最常見和有趣的擬似類別開始：:hover。這個小東西讓你能在用戶將鼠標悬停在元素上時改變其樣式。這就像魔法一樣！

<button class="my-button">將鼠標悬停在我身上！</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: lightblue;
color: black;
}

在這個例子中，我們的按鈕從藍色帶白色文字開始。但是當你將鼠標悬停在上面時——噗！——它會變成淺藍色帶黑色文字。試試看，看看魔法發生！

擬似類別 Active

接下來是 :active 擬似類別。當用戶正在激活一個元素，例如當他們點擊一個按鈕時，此類別會被觸發。

<button class="my-button">點我！</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: darkblue;
transform: scale(0.95);
}

現在，當你點擊並按住按鈕時，它會變成深藍色並稍微縮小。就像按鈕在說："嘿，我被點擊了！"

擬似類別 Focus

:focus 擬似類別對於提高無障礙性特別有用。當元素獲得焦點時，會應用它，這可能會在用戶點擊輸入字段或使用 Tab 鍵切換到它時發生。

<input type="text" class="my-input" placeholder="輸入一些東西...">

.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

使用這段 CSS，當輸入字段獲得焦點時，它會得到一個藍色邊框和一個微妙的藍色光暈。這是引導用戶填寫表單的好方法！

擬似類別 nth Child

現在，我們來看看更複雜一點的 :nth-child() 擬似類別。這個擬似類別讓你能夠根據元素在兄弟姐妹群組中的位置來選擇它們。

<ul class="my-list">
<li>第一個項目</li>
<li>第二個項目</li>
<li>第三個項目</li>
<li>第四個項目</li>
<li>第五個項目</li>
</ul>

.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
color: blue;
}

在這個例子中，我們將每個奇數編號的列表項目樣式化為淺灰色背景，並將每個第三個項目樣式化為藍色文字。就像在列表中創造一個模式！

擬似類別 First-Child

:first-child 擬似類別選擇兄弟姐妹群組中的第一個元素。這對於給列表中的第一個項目或文章中的第一個段落特殊待遇非常適合。

<div class="container">
<p>我是第一個段落！</p>
<p>我只是一個普通段落。</p>
<p>我也是！</p>
</div>

.container p:first-child {
font-weight: bold;
color: blue;
}

現在第一個段落從其餘段落中脫穎而出。就像給第一個元素發放 VIP 過關證！

擬似類別 Last-Child

正如你可能猜到的，:last-child 是 :first-child 的相反。它選擇兄弟姐妹群組中的最後一個元素。

<ul class="my-list">
<li>第一個項目</li>
<li>第二個項目</li>
<li>第三個項目</li>
<li>最後一個項目！</li>
</ul>

.my-list li:last-child {
font-style: italic;
color: green;
}

使用這段 CSS，列表中的最後一個項目會得到特殊的綠色、斜體待遇。這是一種很好的總結方式！

擬似類別 Lang

:lang 擬似類別稍微專業一點。它讓你能夠根據文件的語言或元素的語言來選擇元素。

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
color: blue;
}

p:lang(fr) {
color: red;
}

p:lang(es) {
color: green;
}

這段 CSS 將根據語言為每個問候語上色。就像為你的網站創建一個多語言顏色代碼！

擬似類別 Not

最後但同樣重要的是，我們來看看 :not() 擬似類別。這個擬似類別有點不同——它選擇不匹配你所指定選擇器的元素。

<div class="container">
<p>我是一個段落。</p>
<p class="special">我是一個特殊段落！</p>
<p>我也是！</p>
</div>

.container p:not(.special) {
color: gray;
}

在這種情況下，除了帶有 "special" 類的段落之外，所有段落都會被染成灰色。就像在說："樣式化除了這一件事以外的所有東西！"

CSS 擬似類別列表

CSS 中有許多其他的擬似類別。以下是一些常見的：

擬似類別	描述
:hover	選擇當鼠標悬停在元素上時的元素
:active	選擇當元素正在被激活時的元素
:focus	選擇當元素有焦點時的元素
:nth-child()	選擇基於兄弟姐妹群組中位置的元素
:first-child	選擇第一個子元素
:last-child	選擇最後一個子元素
:lang()	選擇基於語言的元素
:not()	選擇不匹配選擇器的元素
:link	選擇未訪問的鏈接
:visited	選擇已訪問的鏈接
:checked	選擇被勾選的輸入元素
:disabled	選擇禁用的元素
:empty	選擇沒有子元素的元素

好了，大家！我們已經穿越了 CSS 擬似類別的世界，從基礎到一些較為先進的技術。記住，掌握這些的關鍵是練習。所以，去吧，在你自己的專案中玩轉這些擬似類別。在你還沒意識到之前，你將會創建有動態、互動的網站，以各種酷炫的方式回應用戶的操作。開心編程！

Credits: Image by storyset