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手冊


更多CSS教程: