CSS偽類

學習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元素：

1
2
3

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，因此您可以定位第一頁、所有左頁和所有右頁，它們通常會以稍微不同的方式進行樣式化。

tags: [“CSS”, “Pseudo Classes”, “Web Development”]