1. 程式人生 > 實用技巧 >css按狀態選擇連結元素

css按狀態選擇連結元素

css允許根據連結的當前狀態對它們進行格式化。連結的狀態包括訪問者是否將滑鼠停留在連結上,連結是否被訪問過,等等。可以通過一系列偽類實現這一特性。

a:link

設定從未被啟用或指向,當前也沒有被啟用或指向的連結的外觀。

a:link {color: red;}

新的、未訪問的連結顯示為紅色。

a:visited

以設定訪問者已啟用過的連結的外觀。

a:visited {color: orange;}

訪問過的連結變為橙色。

a:focus

前提是連結是通過鍵盤選擇並已準備好啟用的,(注意 :如果連結處於活躍狀態也會獲得焦點)。

a:focus {color: purple;}

連結獲得焦點(如通過Tab鍵)時顯示為紫色。

a:hover

以設定游標指向連結時連結的外觀。

a:hover {color: green;}

當訪問者將滑鼠指標停留在連結上時,它顯示為綠色。

資源搜尋網站大全 https://www.renrenfan.com.cn

a:active

以設定啟用過的連結的外觀。

a:active {color: blue;}

當訪問者啟用連結時,它變為藍色。

提示:

也可以對其他型別的元素使用:active和:hover偽類。例如,設定p:hover{ color: red; }以後,滑鼠停留在任何段落上段落都會顯示為紅色。

由於連結可能同時處於多種狀態(如同時處於啟用和滑鼠停留狀態),且晚出現的規則會覆蓋前面出現的規則,所以,一定要按照下面的順序定義規則:link、visited、focus、hover、active(縮寫為LVFHA)。有人提議使用LVHFA的順序,這也是可行的。