:visited Pseudo類在HTML中的應用

在HTML中使用 :visited 偽類，可以改變鏈接在頁面中展現的樣式。 :visited 偽類可以幫助用戶區分已訪問和未訪問的鏈接， 從而提供更好的用戶體驗。

一、基本用法

在CSS中，使用 :visited 偽類可以改變已訪問鏈接的樣式。例如：

a:visited {
  color: purple;
}

這將把所有被訪問過的鏈接變成紫色。我們可以用其他 CSS 屬性來改變 visited 鏈接的樣式， 如下面的例子所示：

a:visited {
  color: purple;
  text-decoration: none;
}

這將刪除已訪問鏈接的下劃線。

二、安全問題

使用 :visited 偽類時，需要注意一個重要的安全問題。 :visited 偽類可以使攻擊者用 JavaScript 檢查用戶的瀏覽歷史記錄，從而竊取用戶的隱私信息。

例如，一個網站可能使用 JavaScript 檢查 :visited 鏈接的樣式來確定用戶是否訪問了某些銀行網站，從而竊取用戶的個人信息。為了避免這種情況，Firefox 和一些其他的瀏覽器已經禁用了一些與 :visited 相關的 CSS 屬性。這些屬性包括 color, background-color 和 outline 等。這些屬性可以用來確定某個鏈接是否已經被訪問過。

三、應用案例

除了基本用法之外， :visited 偽類還可以用來創建一些非常酷的效果。

比如說，假設我們想要在頁面上展示一個歷史記錄頁面，我們可以使用 :visited 偽類來創建已訪問和未訪問本地鏈接之間的一些差異。如下所示：

a:visited {
  color: green;
}
a:not(:visited) {
  color: red;
}

這將把已訪問的鏈接變成綠色，未訪問的鏈接變成紅色。這樣，用戶就可以快速判斷哪些鏈接已經被訪問過，哪些還沒有。

另一個場景是，在登錄頁中，我們可以使用 :visited 偽類區分常用的登錄賬號和歷史記錄中的登錄賬號，使用戶更方便地選擇自己的登錄賬號。如下所示：

a:visited {
  color: orange;
  font-weight: bold;
}
a[data-username] {
  color: blue;
}

這樣做會引起已訪問的登錄賬號變成橙色加粗，未訪問的登錄賬號則變成藍色。這樣，用戶就可以快速找到自己最經常使用的登錄賬號。

四、總結

在 HTML 中使用 :visited 偽類，可以改變鏈接在頁面中展現的樣式。例如，我們可以使用 :visited 偽類把已訪問過的鏈接變成紫色；也可以用來創建已訪問和未訪問本地鏈接之間的一些差異。

需要注意的是，在使用 :visited 偽類時，需要注意安全問題。 :visited 偽類可以使攻擊者用 JavaScript 檢查用戶的瀏覽歷史記錄，從而竊取用戶的隱私信息。為了避免這種情況，應該使用 Firefox 或其他瀏覽器中已限制 :visited 相關的 CSS 屬性。