在網頁設計中，我們常需要讓元素在不同狀態下呈現不同的樣式，例如滑鼠移過按鈕時改變顏色，或是點擊連結後變更其外觀，而本文將要介紹的 CSS 偽類就能幫助我們做到這件事情。
什麼是偽類？
偽類是一種特殊的 CSS 選擇器，它能根據元素的狀態、位置或使用者互動來套用不同的樣式。使用時只需在選擇器後加上冒號（:）和偽類名稱即可。
常見的偽類
以下是幾個常見的偽類及其用途：連結相關偽類
:link: 尚未被訪問過的連結。:visited: 已經被訪問過的連結。:hover: 滑鼠指標移動到元素上方時的狀態。:focus: 元素獲得焦點時的狀態，通常是透過鍵盤 Tab 鍵或點擊獲得。:active: 正在點擊但還沒放開的元素狀態。
a:link {
color: blue; /* 未訪問超連結顯示藍色 */
}
a:visited {
color: purple; /* 已訪問超連結顯示紫色 */
}
a:hover {
color: red; /* 滑鼠懸停時顯示紅色 */
}
a:focus {
outline: 2px solid green; /* 聚焦時顯示綠色邊框 */
}
a:active {
color: orange; /* 點擊中顯示橙色 */
}
元素位置相關偽類
:first-child: 選取父元素中的第一個子元素。:last-child: 選取父元素中的最後一個子元素。:nth-child(n): 選取父元素中的第 n 個子元素，n 可設定 odd、even、2n、2n+1等各種值。:first-of-type: 選取父元素中第一個特定類型的子元素。:last-of-type: 選取父元素中最後一個特定類型的子元素。:nth-of-type(n)：選取父元素中第 n 個同類型子元素。
/*
選取 .container 中的第一個子元素，
並檢查該子元素是否為 <p>，如果是，則套用樣式。
注意：只有當 .container 的第一個子元素是 <p> 時，此選擇器才會生效。
*/
.container p:first-child {
font-weight: bold;
color: blue;
}
/*
選取 .container 中的最後一個子元素，
並檢查該子元素是否為 <p>，如果是，則套用樣式。
注意：只有當 .container 的最後一個子元素是 <p> 時，此選擇器才會生效。
*/
.container p:last-child {
background-color: lightyellow;
font-style: italic;
}
/*
選取 .container 中的第 2 個子元素（不論標籤類型），
並檢查該元素是否為 <p>，如果是，則套用樣式。
注意：這裡的「第 2 個子元素」是根據整個 .container 的子元素排列順序，而非僅限於 <p> 標籤。
*/
.container p:nth-child(2) {
color: red;
}
/*
選取 .container 中所有 <p> 標籤的第 2 個（忽略其他標籤類型），
並套用樣式。
注意：這裡只關注 <p> 標籤的順序，不考慮其他標籤的存在。
*/
.container p:nth-of-type(2) {
color: blue;
}
表單相關偽類
:enabled: 選取可用的表單元素。:disabled: 選取不可用的表單元素。:checked: 選取被選中的表單元素（如核取方塊或單選按鈕）。
input:enabled {
border-color: green; /* 可用輸入框顯示綠色邊框 */
}
input:disabled {
border-color: gray; /* 禁用輸入框顯示灰色邊框 */
}
input[type="checkbox"]:checked {
background-color: yellow; /* 勾選時背景設為黃色 */
}
結語
CSS 偽類能讓你透過簡單的語法，控制超連結、表單等元素在不同狀態下的樣式。掌握並熟悉偽類的使用方法後，你就能打造出更具互動性的使用者介面。