HTML:a標簽的四種狀態使用方法


在看網頁源代碼的時候遇到a:link和a:visited覺得很有意思,好奇地查了一下相關解釋。

關於a標簽

根據MDN DOCs記錄,<a>元素也成為錨元素,可以創建通向其他網頁、文件、同一頁面內的位置、電子郵件地址或任何其他 URL 的超鏈接。常用href屬性來指示鏈接的目標地址;target屬性用來規定在什么位置打開鏈接文檔,其中默認屬性_self表示在當前頁面加載,_blank表示在新窗口打開。、

根據w3cschool記錄,在所有瀏覽器中,鏈接的默認外觀是:

  • 未被訪問的鏈接帶有下划線而且是藍色的
  • 已被訪問的鏈接帶有下划線而且是紫色的
  • 活動鏈接帶有下划線而且是紅色的

a鏈接標簽的四種狀態

這四種狀態實際是錨偽類。在支持 CSS 的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和鼠標懸停狀態。

  1.  
    a:link {color: #FF0000} /* 未訪問的鏈接 */
  2.  
    a:visited {color: #00FF00} /* 已訪問的鏈接 */
  3.  
    a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
  4.  
    a:active {color: #0000FF} /* 選定的鏈接 */

提示:在 CSS 定義中,a:hover 必須被置於 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定義中,a:active 必須被置於 a:hover 之后,才是有效的。

提示:偽類名稱對大小寫不敏感。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML選擇器的四種使用方法 html常用標簽的使用方法 HTML中的meta標簽及其使用方法 HTML中base標簽的使用方法 HTML標簽中的Link標簽的使用方法和場景 vuex的state中的數據的四種使用方法 HTML中javascript的