a標籤的四個偽類:link
,:visited
,:hover
和:active
的執行順序,為了方便記憶,可以簡記為 LVHA (LoVe HAte)。
更詳細的解釋:
:link
(連結): 應用於所有未訪問過的連結。:visited
(已訪問): 應用於使用者已經訪問過的連結。:hover
(懸停): 當滑鼠指標懸停在連結上時應用。:active
(啟用): 當連結被啟用時應用,例如,滑鼠按鈕按下但還沒有釋放的時候。
樣式衝突時的優先順序
由於這些偽類可以應用於同一個元素,因此瞭解它們的優先順序非常重要。當出現衝突時,優先順序高的樣式會覆蓋優先順序低的樣式。 優先順序順序 (從高到低) 與它們的執行順序相同,即 LVHA:
:active
:hover
:visited
:link
示例
為了確保樣式正確應用,你需要按照 LVHA 的順序編寫 CSS 規則:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
在這個例子中:
- 未訪問的連結將顯示為藍色。
- 已訪問的連結將顯示為紫色。
- 當滑鼠懸停在連結上時(無論是否訪問過),它會變成紅色。
- 當點選連結時,它會變成橙色。
記住 LVHA 的順序對於編寫有效的 CSS 樣式至關重要,可以避免一些常見的樣式衝突問題。