1. 程式人生 > 其它 >CSS連結偽類之"愛恨"原則

CSS連結偽類之"愛恨"原則

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兩種屬性。如果對於相同元素有針對不同條件的定義,宜將最一般的條件放在最上面,並依此向下,保證最下面的是最特殊的條件,後面的屬性會覆蓋前面的屬性。