CSS :visited 偽類

一、什麼是CSS :visited偽類

:visited是CSS的一種偽類，代表一組已經訪問過的鏈接的樣式, 當一個鏈接被點擊並且瀏覽器記憶了用戶訪問過該鏈接時，該鏈接就被視為已經訪問過了，此時可以給該鏈接新增樣式。

下面是一個簡單的例子：

a:visited {
  color: green;
}

以上代碼意味著當用戶訪問過一個鏈接之後，該鏈接文字將變為綠色。

二、CSS :visited偽類的應用場景

:visited 偽類可以很好地幫助網站設計師來提高用戶體驗，也可以幫助提高設計的可訪問性。以下是一些使用 :visited 偽類的場景:

1. 改變已訪問鏈接的樣式

在用戶點擊一個鏈接並且訪問過該鏈接後，為了讓用戶知道他們已經瀏覽過該鏈接，我們通常會改變該鏈接的樣式，例如增加下劃線、更改顏色或加粗等。例如，我們可以使用以下 CSS 代碼來為已訪問的鏈接更改顏色:

a:visited {
  color: green;
}

通過以上代碼，我們可以為所有用戶訪問過的鏈接更改字體顏色為綠色，提醒用戶已經訪問過。

2. 使用 :visited 來改變導航菜單的樣式

我們也可以使用 :visited 來改變導航菜單的樣式，因為當用戶訪問菜單中的一個鏈接時，通常會希望該鏈接的樣式變為已訪問的樣式（例如，變為灰色或取消下劃線等）。以下是一個簡單的示例代碼:

.nav a:visited {
  color: gray;
}

以上代碼為 .nav 元素內所有訪問過的鏈接加上灰色字體顏色。

3. 正確使用 :visited

:visited 偽類雖然很強大，但是由於涉及到用戶隱私，瀏覽器對其進行了限制。例如，當使用者在訪問 HTTPS 網站時，在 CSS 中使用 :visited 將不再生效。這是因為 :visited 能夠暴露用戶行為數據，因此，瀏覽器引入了此限制以及其他限制來確保用戶隱私。

因此，如果你要使用 :visited，你要非常小心。作為一個有責任心的開發者，你應該正確使用 :visited，以確保遵守所有相關的隱私規定。良好的做法是只為已知的安全站點使用 :visited，或者不使用它們，而是使用其他可行的解決方案實現類似的功能。

三、CSS :visited偽類的注意事項

:visited 偽類是一種非常方便的工具，但是在使用它們的時候，需要注意以下幾點:

1. 如果你啟用了某個鏈接的 :visited 樣式，那麼這個樣式將 固定存在 於此。哪怕用戶不再訪問該鏈接，該 :visited 樣式會一直存在，並且每次用戶打開頁面時都會載入它。 這對於那些通過 JavaScript 改變樣式的站點來說可能會更加明顯。

2. 無法覆蓋 :visited 樣式。如果使用了 :visited 樣式，就無法使用一個通用樣式來覆蓋它，不過，可以通過添加 !important 屬性（儘可能少使用 !important）來覆蓋它。 但這並非解決問題的最佳辦法。 建議使用其他選擇器來代替 :visited 樣式，例如使用 class 選擇器。

3. 一定不能將 :visited 偽類用在對鏈接以外的元素上，因為這種方式可以讓攻擊者可能獲取到用戶瀏覽歷史，從而威脅到用戶的隱私。瀏覽器會對這種用法進行限制，執行腳本時將導致崩潰。

所以，在使用 :visited 偽類時，不僅要考慮到滿足用戶的外觀需求，還要牢記保護用戶的隱私。