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

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

關於a標籤

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

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

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

a鏈接標籤的四種狀態

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

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

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章