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元素： a { color: yellow; } 事情看起來很正常，直到您點擊一個鏈接。當您點擊鏈接時，鏈接會返回預定義的顏色（藍色）。然後，當您打開鏈接並返回頁面時，鏈接現在是藍色的。 為什麼會這樣？ 因為點擊鏈接會改變狀態，並進入:active狀態。當它被訪問時，它處於:visited狀態。永遠如此，直到用戶清除瀏覽歷史。 因此，為了正確地在所有狀態下將鏈接設置為黃色，您需要編寫： a, a:visited, a:active { color: yellow; } :nth-child() 值得特別一提。它可用於通過 :nth-child(odd) 和 :nth-child(even) 定位奇數或偶數位置的子項。...