學習CSS偽類的基礎知識
偽類是預定義的關鍵字，用於根據元素的狀態或對特定子元素進行選擇。
它們以單冒號:開頭。
它們可以作為選擇器的一部分使用，非常有用，例如在活動或訪問鏈接上更改樣式，懸停時更改樣式，聚焦或對第一個子元素或奇數行進行目標。在許多情況下非常方便。
以下是您可能會使用的最常用的偽類：
| 偽類 | 目標 |
|---|---|
:active |
正在被用戶激活的元素（例如點擊）。通常用於鏈接或按鈕 |
:checked |
已啟用的複選框，選項或單選按鈕輸入類型 |
:default |
一組選項中的默認選項（例如，在select或單選按鈕中的選項） |
:disabled |
已禁用的元素 |
:empty |
沒有子元素的元素 |
:enabled |
已啟用的元素（與:disabled相反） |
:first-child |
兄弟姐妹中的第一個子元素 |
:focus |
具有焦點的元素 |
:hover |
鼠標懸停的元素 |
:last-child |
兄弟姐妹中的最後一個子元素 |
:link |
尚未訪問過的鏈接 |
:not() |
不匹配傳遞的選擇器的任何元素。例如:not(span) |
:nth-child() |
匹配指定位置的元素 |
:nth-last-child() |
從末尾開始匹配指定位置的元素 |
:only-child |
沒有任何兄弟姐妹的元素 |
:required |
具有設置了required屬性的表單元素 |
:root |
表示html元素。就像定位html，但更具體。在CSS變量中很有用。 |
:target |
匹配當前URL片段的元素（用於頁面內導航） |
:valid |
在客戶端成功驗證的表單元素 |
:visited |
已訪問過的鏈接 |
讓我們舉個例子。實際上是一個常見的例子。您想要樣式化一個鏈接，因此創建一個CSS規則以定位a元素：
a {
color: yellow;
}
事情看起來很正常，直到您點擊一個鏈接。當您點擊鏈接時，鏈接會返回預定義的顏色（藍色）。然後，當您打開鏈接並返回頁面時，鏈接現在是藍色的。
為什麼會這樣？
因為點擊鏈接會改變狀態，並進入:active狀態。當它被訪問時，它處於:visited狀態。永遠如此，直到用戶清除瀏覽歷史。
因此，為了正確地在所有狀態下將鏈接設置為黃色，您需要編寫：
a,
a:visited,
a:active {
color: yellow;
}
:nth-child() 值得特別一提。它可用於通過 :nth-child(odd) 和 :nth-child(even) 定位奇數或偶數位置的子項。
它通常用於列表中的奇數行和偶數行之間進行不同顏色的着色：
ul:nth-child(odd) {
color: white;
background-color: black;
}
您也可以使用它來定位元素的前三個子元素，例： :nth-child(-n+3). 或者您可以對每5個元素中的第一個元素進行樣式化， :nth-child(5n)。
某些偽類僅用於打印，例如 :first, :left, :right，因此您可以定位第一頁、所有左頁和所有右頁，它們通常會以稍微不同的方式進行樣式化。