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应用的样式不会影响元素，这些元素通常用于外部样式表。

这些限制旨在保护用户隐私，并防止网站通过操纵已访问链接的外观来读取敏感的浏览历史信息。

打印页面