隱私與 :visited 選擇器

善意的謊言

為了保護使用者隱私，瀏覽器在某些情況下會對Web應用程式撒謊

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

已訪問連結樣式的限制

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

• color
• background-color
• border-color（及其子屬性）
• column-rule-color
• outline-color
• text-decoration-color
• text-emphasis-color
• fill和stroke屬性的顏色部分

此外，即使對於上述樣式，未訪問連結和已訪問連結之間的透明度差異也不會被應用。此限制阻止了在各種<color>函式中使用alpha引數或使用transparent關鍵字來區分這兩種狀態。

以下是樣式與上述限制一起使用的示例：

: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開發人員的影響

在開發網站時，您可能需要考慮以下事項：

• 根據連結的訪問狀態更改background-image值將不起作用，因為只有顏色可以用於設定已訪問連結的樣式。
• 透過:visited選擇器設定樣式時，原本透明的顏色將不會應用。

另見

• 透過CSS :visited選擇器防止對使用者歷史記錄的攻擊 (2010)