請寫出:link、:visited、:hover、:active的執行順序

王铁柱6發表於2024-11-29

這些CSS偽類的執行順序是 LVHA，也就是：

  1. :link (L): 應用於所有未訪問過的連結。
  2. :visited (V): 應用於所有使用者訪問過的連結。
  3. :hover (H): 應用於滑鼠懸停在其上的連結。
  4. :active (A): 應用於被啟用的連結（例如，滑鼠點選連結時）。

理解優先順序和覆蓋:

由於這些偽類可以應用於同一個元素，因此理解它們的優先順序和如何相互覆蓋至關重要。 後面的規則會覆蓋前面的規則。

例如，如果一個連結同時具有 :visited 和 :hover 樣式，當滑鼠懸停在已訪問過的連結上時，:hover 樣式將覆蓋 :visited 樣式。 這是因為 :hover 在LVHA順序中排在 :visited之後。

為了避免混淆和確保樣式按預期應用，最好按照LVHA的順序編寫這些偽類規則。 例如：

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

這樣，未訪問的連結將顯示為藍色，訪問過的連結將顯示為紫色，滑鼠懸停時將顯示為紅色，點選時將顯示為橙色。

一些額外的注意點：

  • :visited 的樣式限制: 出於隱私原因，瀏覽器對 :visited 樣式的控制非常嚴格。 你只能修改連結的顏色，以及少數其他屬性，例如 outline。 這是為了防止網站透過CSS程式碼跟蹤使用者的瀏覽歷史。
  • :active 的持續時間很短: :active 狀態只在連結被啟用的極短時間內生效，通常是使用者點選連結並按住滑鼠的期間。

記住LVHA順序，並理解優先順序和覆蓋規則，可以幫助你更好地控制連結的樣式。

相關文章