CSS僞類——動態僞類（link/visited/hover/active/focus）

僞類的種類能夠分爲一下幾個類別：

• 動態僞類（link/visited等）
• 目標僞類（:target）
• 語言僞類（:lang）
• UI狀態僞類（disabled/checked/enabled）
• 結構化僞類（nth等）
• 對立面僞類（not。。）

本文主要講一下動態僞類

動態僞類

定義在連接上面的僞類

• link：用來定義連接未被訪問的樣式
• visited：用來定義連接已經被訪問過的樣式（默認狀態下是跟蹤了用戶的行爲）

定義用戶行爲的僞類（顯示順序hover-focus-active）

• hover：用來定義用戶用鼠標劃過對應的元素，可是未激活顯示的樣式
• focus：用來定義一個元素自己具有焦點（接受鍵盤、鼠標、form的輸入等）以後，顯示的樣式
• active：用來定義用戶按下鼠標後，可是並未離開時候的樣式，一般是左側的鼠標

注意⚠️

• 一、定義順序：按照link-visited-hover-active的順序設置對應的樣式，纔會有效

• 二、對於div是沒有focus的行爲的，由於一個div無法用鼠標得到焦點，可是能夠經過設置div的tabIndex。

  • tabIndex爲負值，表示元素能夠被聚焦，可是不能經過tab鍵導航到
  • tabIndex爲0，能夠經過tab鍵導航到，相對順序根據DOM的元素
  • tabIndex爲正值，能夠經過tab鍵導航到，它的相對順序按照tabindex 的數值遞增而滯後獲焦
• 三、一個元素可能處於不一樣的僞類狀態，好比同時處於visited和active；處於同一種狀態的僞類並無優先級

移動端和PC端的區別

• 對於hover，移動端沒有hover，hover和active會合並在一塊兒，對於鍵盤設備，hover這個狀態不會存在

瀏覽器的兼容性

移動端safari瀏覽器不支持focus和active

參考資料

一、動態僞類
二、僞類的兼容性