CSS - 偽類 :visited 屬性

CSS 偽類:visited用於設定使用者已訪問的連結的樣式。

需要注意的是，:visited偽類僅適用於具有href屬性的<a>和<area>元素。這確保只有可點選的連結會受到:visited選擇器的影響。
偽類的順序在 CSS 中至關重要，因為它們可以根據特異性和宣告順序相互覆蓋。
:visited和未訪問的:link偽類指定的樣式可以被任何後續的使用者操作偽類（:hover或:active）以相同或更高的特異性覆蓋。
LVHA（連結、已訪問、懸停、活動）順序是一項指導原則，用於確保根據使用者與連結的互動，樣式能夠適當地應用於連結的不同狀態。

以下是 LVHA 順序的詳細解釋：

:link - 此偽類為尚未訪問的連結設定樣式。
:visited - 此偽類為已訪問的連結設定樣式。
:hover - 當用戶將滑鼠懸停在連結上時，此偽類為連結設定樣式。
:active - 當連結被啟用（例如，單擊）時，此偽類為連結設定樣式。

語法

:visited {
   /* css declarations */
 }

CSS :visited 示例

以下示例演示瞭如何使用:visited偽類以及:link、:hover和:active偽類來設定連結的不同狀態的樣式。

<html>
<head>
    <style>
        a:link {
            color: blue;
            text-decoration: none;
        }
        a:visited {
            color: purple;
            text-decoration: underline;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
  <h1>Pseudo-class :visited Example</h1>
<a href="#test-visited-link" target="_blank">Unvisited Link</a><br>
    <a href="" target="_blank">Visited Link</a><br>
    <a href="" target="_blank">Hover Over Me</a><br>
    <a href="" target="_blank">Click Me</a>
</body>
</html>

隱私限制

在大多數現代 Web 瀏覽器中，由於隱私和安全問題，對:visited偽類施加了限制。

允許的 CSS 屬性：:visited偽類僅限於修改一組特定的 CSS 屬性，包括color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、column-rule-color、outline-color、text-decoration-color和text-emphasis-color。
允許的 SVG 屬性：處理 SVG 元素時，:visited偽類可以修改fill和stroke屬性。
限制 alpha 分量：alpha（透明度）分量會被忽略。相反，將使用元素非:visited狀態下的 alpha 分量。在某些瀏覽器（例如 Firefox）中，當 alpha 分量設定為 0 時，在某些情況下，在:visited狀態下應用的樣式可能會被完全忽略。
Window.getComputedStyle 方法的行為：window.getComputedStyle方法不會反映使用:visited偽類應用的樣式。它始終返回非:visited顏色的值。
:visited 和 <link> 元素：:visited偽類不會定位<link>元素。因此，使用:visited應用的樣式不會影響元素，這些元素通常用於外部樣式表。

這些限制旨在保護使用者隱私，並防止網站透過操縱已訪問連結的外觀來讀取敏感的瀏覽歷史資訊。

列印頁面