css按狀態選擇連結元素
阿新 • • 發佈:2020-11-25
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的順序,這也是可行的。