CSS偽類

了解CSS偽類的基礎

偽類是預定義的關鍵字，用於根據元素選擇元素狀態，或定位到特定的孩子。

他們以單冒號 :。

它們可以用作選擇器的一部分，它們對於設置活動或訪問鏈接的樣式非常有用，例如，在懸停時更改樣式，將焦點對准或定位到第一個子對像或奇數行。在許多情況下非常方便。

這些是您可能會使用的最流行的偽類：

偽類	目標
`:active`	用戶正在激活的元素（例如，單擊）。主要用於鏈接或按鈕
`:checked`	啟用的複選框，選項或單選輸入類型
`:default`	一組選項中的默認值（例如，選擇或單選按鈕中的選項）
`: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個元素中的1個設置樣式:nth-child(5n)。

一些偽類僅用於打印，例如:first，:left，:right，因此您可以定位首頁，所有左側頁面和所有右側頁面，這些頁面的樣式通常略有不同。

免費下載我的CSS手冊