概述

CSS 偽類用于向選擇器添加樣式，但僅當(dāng)這些選擇器滿足特定條件時(shí)。偽類是通過(guò)在 CSS 中的選擇器后添加一個(gè)冒號(hào) (:) 來(lái)表示的，然后是一個(gè)偽類，例如“hover”、“focus”或“active”，如下所示：

  一：懸停{
    /* 這里是你的風(fēng)格 */
  }

偽類的想法是，當(dāng)用戶將鼠標(biāo)懸停在元素上(:hover)或使用鍵盤(pán)(:focus)或在用戶選擇鏈接時(shí)(:active)時(shí)，您可以對(duì)元素進(jìn)行不同的樣式化。您還可以在用戶訪問(wèn)鏈接后對(duì)鏈接進(jìn)行不同的樣式化 (:visited)。還有許多其他可用的偽類。

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

當(dāng)用戶用鼠標(biāo)指向網(wǎng)頁(yè)上的對(duì)象時(shí)，如果該對(duì)象以某種方式響應(yīng)，這將很有幫助。例如，當(dāng)用戶將鼠標(biāo)懸停在鏈接上時(shí)，該鏈接的顏色和背景顏色可能會(huì)反轉(zhuǎn)。在下面的 CSS 示例中，頁(yè)面上的所有鏈接都被風(fēng)格化為白色背景上的黑色，但當(dāng)用戶將鼠標(biāo)懸停在顏色上時(shí)，顏色會(huì)反轉(zhuǎn)。

  一個(gè) {
    顏色：黑色;
    背景顏色：白色；
  }
  一：懸停{
    白顏色;
    背景顏色：黑色；
  }

此功能使頁(yè)面栩栩如生，當(dāng)用戶在頁(yè)面上移動(dòng)鼠標(biāo)時(shí)做出響應(yīng)。對(duì)于使用鍵盤(pán)導(dǎo)航的人(例如，通過(guò)按 Tab 鍵在頁(yè)面上的鏈接之間移動(dòng))，此功能更為關(guān)鍵，因?yàn)殒I盤(pán)用戶通常很難跟蹤他們?cè)陧?yè)面上的位置。大多數(shù)網(wǎng)絡(luò)瀏覽器都提供了一些視覺(jué)指示當(dāng)前哪個(gè)元素具有焦點(diǎn)，但在一些領(lǐng)先的瀏覽器中，這只是一條細(xì)虛線，即使不是不可能，也很難看到，尤其是在某些背景下。要為鍵盤(pán)和鼠標(biāo)用戶添加相同的功能，我們只需將 :focus 偽類添加到我們之前的定義中，如下所示：

  一個(gè) {
    顏色：黑色;
    背景顏色：白色；
  }
  一個(gè)：懸停，一個(gè)：焦點(diǎn){
    白顏色;
    背景顏色：黑色；
  }

現(xiàn)在，每次用戶導(dǎo)航到集合上的鏈接時(shí)，無(wú)論他們是通過(guò)鼠標(biāo)指向還是通過(guò)鍵盤(pán)導(dǎo)航，該鏈接都會(huì)反轉(zhuǎn)顏色。