在a標籤上的四個偽類執行順序是什麼?

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

a標籤的四個偽類:link:visited:hover:active的執行順序,為了方便記憶,可以簡記為 LVHA (LoVe HAte)。

更詳細的解釋:

  • :link (連結): 應用於所有未訪問過的連結。
  • :visited (已訪問): 應用於使用者已經訪問過的連結。
  • :hover (懸停): 當滑鼠指標懸停在連結上時應用。
  • :active (啟用): 當連結被啟用時應用,例如,滑鼠按鈕按下但還沒有釋放的時候。

樣式衝突時的優先順序

由於這些偽類可以應用於同一個元素,因此瞭解它們的優先順序非常重要。當出現衝突時,優先順序高的樣式會覆蓋優先順序低的樣式。 優先順序順序 (從高到低) 與它們的執行順序相同,即 LVHA:

  1. :active
  2. :hover
  3. :visited
  4. :link

示例

為了確保樣式正確應用,你需要按照 LVHA 的順序編寫 CSS 規則:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

在這個例子中:

  • 未訪問的連結將顯示為藍色。
  • 已訪問的連結將顯示為紫色。
  • 當滑鼠懸停在連結上時(無論是否訪問過),它會變成紅色。
  • 當點選連結時,它會變成橙色。

記住 LVHA 的順序對於編寫有效的 CSS 樣式至關重要,可以避免一些常見的樣式衝突問題。

相關文章