隱私與 :visited 選擇器

在 2010 年之前，CSS 的 :visited 選擇器允許網站揭示使用者的瀏覽歷史記錄，並找出使用者訪問過哪些網站。這是透過 window.getComputedStyle 和其他技術實現的。此過程執行速度很快，不僅可以確定使用者在網路上的活動，還可以用來猜測使用者身份的大量資訊。

為了緩解這個問題，瀏覽器限制了可以從已訪問連結中獲取的資訊量。

善意的謊言

為了保護使用者的隱私，Firefox 和其他瀏覽器在某些情況下會向 Web 應用程式撒謊。

window.getComputedStyle 方法以及類似的函式（如 element.querySelector）將始終返回表示使用者從未訪問過頁面上任何連結的值。
如果使用兄弟選擇器，例如 :visited + span，則相鄰元素（此示例中的 span）的樣式將顯示為未訪問。
在極少數情況下，如果使用巢狀連結元素，並且匹配的元素與正在測試其在歷史記錄中是否存在連結不同，則該元素也將呈現為未訪問狀態。

訪問連結樣式的限制

您可以設定已訪問連結的樣式，但您可以使用的樣式有限。只有以下樣式可以應用於已訪問連結。

此外，即使對於上述樣式，您也無法更改未訪問和已訪問連結之間的透明度，因為否則您可以使用 alpha 引數來使用 rgb() 或 hsl()，或者使用 transparent 關鍵字。

以下是如何使用具有上述限制的樣式的示例。

css

:link {
  outline: 1px dotted blue;
  background-color: white;
  /* The default value of background-color is `transparent`. You need to
     specify a different value, otherwise changes on :visited won't apply. */
}

:visited {
  outline-color: orange; /* Visited links have an orange outline */
  background-color: green; /* Visited links have a green background */
  color: yellow; /* Visited links have yellow colored text */
}

對 Web 開發人員的影響

總的來說，這些限制不應該對 Web 開發人員造成太大的影響。但是，它們可能需要對現有站點進行以下更改。

使用背景影像根據連結是否已被訪問來設定連結樣式將不再起作用，因為只能使用顏色來設定已訪問連結的樣式。
如果在 :visited 選擇器中設定其他透明顏色的樣式，則這些顏色將無法顯示。

善意的謊言

訪問連結樣式的限制

對 Web 開發人員的影響

另請參閱