CSS - 伪类

CSS 伪类 :visited 属性用于设置用户访问过的链接的样式。

  • 需要注意的是,:visited 伪类仅适用于 <a>以及具有 href 属性的 <area> 元素。这确保了只有可点击的链接才会受到 :visited 选择器的影响。

  • 伪类的顺序在 CSS 中至关重要,因为它们可以根据特定性和顺序相互覆盖。声明。

  • 由 :visited 和 unvisited :link 伪指定的样式-类可以被任何后续用户操作伪类覆盖(:hover:active),具有相同或更高的特异性。

  • LVHA(链接、已访问、悬停、活动)顺序为确保根据用户与链接的交互将样式适当地应用于链接的不同状态的指南。

这里是 LVHA 的详细说明order:
  • :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>css 伪类 :visited 例子</h1>
<a href="#test-visited-link" target="_blank">没有范围的链接</a><br>
    <a href="" target="_blank">访问了的链接</a><br>
    <a href="" target="_blank">鼠标悬停</a><br>
    <a href="" target="_blank">点击看效果</a>
</body>
</html> 

隐私限制

限制强加于 :visited 伪类由于大多数现代 Web 浏览器中的隐私和安全问题,请使用 .class。

  • 允许的 CSS 属性::visited 伪类仅限于修改一组特定的 CSS属性,包括颜色、背景颜色、边框颜色、底部边框颜色、左边框颜色、右边框颜色、顶部边框颜色、列规则颜色、轮廓颜色、文本装饰-color 和 text-emphasis-color。

  • 允许的 SVG 属性:处理 SVG 元素时,:visited 伪类可以修改填充和描边属性。

  • 限制 alpha 分量:样式的 alpha(透明度)分量被忽略。相反,使用元素的非:访问状态的 alpha 分量。在某些浏览器中,例如Firefox,当alpha分量设置为0时,在某些情况下可以完全忽略在:visited状态下应用的样式。

  • Window.getComputedStyle 方法的行为:window.getCompulatedStyle 方法不反映使用 :visited 伪类应用的样式。它始终返回非 :visited 颜色的值。

  • :visited 和 <link> 元素::visited 伪类不以 <link> 元素为目标。因此,使用 :visited 应用的样式不会影响通常用于外部样式表的 元素。

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