CSS連結偽類之"愛恨"原則
阿新 • • 發佈:2021-11-09
CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。"愛恨原則"是我們經常用到的,下面我們就詳細介紹一下經常用於超連結標記<a>的四個偽類,它們分別是:link,visited,hover,active。
根據它的優先順序L >V >H >A,可以這樣記LoVe HAte(愛恨)
超連結<a>的偽類 | 含義 |
a:link | 定義正常連結的樣式 |
a:visited | 定義已訪問過連結的樣式 |
a:hover | 定義滑鼠懸浮在連結上時的樣式 |
a:active | 定義滑鼠點選連結時的樣式 |
上面示例中定義的連結顏色是紅色,訪問過後的連結是黃色,滑鼠懸浮在連結上時是藍色,點選時的顏色是綠色。但要注意的是當你的超連結被訪問過一次之後,所呈現的是a:visited定義的顏色。
但我們每次定義連結樣式時務必確認定義的順序,link--visited--hover-active,也就是我們常說到的LoVe HAte原則(大寫字母就是它們的首字母)。
因為一個滑鼠經過未訪問連結同時擁有a:link、a:hover兩種屬性,滑鼠經過的已訪問連結同時擁有a:visited,a:hover兩種屬性。如果對於相同元素有針對不同條件的定義,宜將最一般的條件放在最上面,並依此向下,保證最下面的是最特殊的條件,後面的屬性會覆蓋前面的屬性。