概述

CSS 偽類用于向選擇器添加樣式，但僅當這些選擇器滿足特定條件時。偽類是通過在 CSS 中的選擇器后添加一個冒號 (:) 來表示的，然后是一個偽類，例如“hover”、“focus”或“active”，如下所示：

  一：懸停{
    /* 這里是你的風格 */
  }

偽類的想法是，當用戶將鼠標懸停在元素上(:hover)或使用鍵盤(:focus)或在用戶選擇鏈接時(:active)時，您可以對元素進行不同的樣式化。您還可以在用戶訪問鏈接后對鏈接進行不同的樣式化 (:visited)。還有許多其他可用的偽類。

使用 CSS 偽類突出顯示用戶的位置

當用戶用鼠標指向網頁上的對象時，如果該對象以某種方式響應，這將很有幫助。例如，當用戶將鼠標懸停在鏈接上時，該鏈接的顏色和背景顏色可能會反轉。在下面的 CSS 示例中，頁面上的所有鏈接都被風格化為白色背景上的黑色，但當用戶將鼠標懸停在顏色上時，顏色會反轉。

  一個 {
    顏色：黑色;
    背景顏色：白色；
  }
  一：懸停{
    白顏色;
    背景顏色：黑色；
  }

此功能使頁面栩栩如生，當用戶在頁面上移動鼠標時做出響應。對于使用鍵盤導航的人(例如，通過按 Tab 鍵在頁面上的鏈接之間移動)，此功能更為關鍵，因為鍵盤用戶通常很難跟蹤他們在頁面上的位置。大多數網絡瀏覽器都提供了一些視覺指示當前哪個元素具有焦點，但在一些領先的瀏覽器中，這只是一條細虛線，即使不是不可能，也很難看到，尤其是在某些背景下。要為鍵盤和鼠標用戶添加相同的功能，我們只需將 :focus 偽類添加到我們之前的定義中，如下所示：

  一個 {
    顏色：黑色;
    背景顏色：白色；
  }
  一個：懸停，一個：焦點{
    白顏色;
    背景顏色：黑色；
  }

現在，每次用戶導航到集合上的鏈接時，無論他們是通過鼠標指向還是通過鍵盤導航，該鏈接都會反轉顏色。