CSS - 伪类 :visited

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

需要注意的是，伪类 :visited 仅适用于具有 href 属性的 <a> 和 <area> 元素。这样可以确保只有可点击的链接才会受到 :visited 选择器的影响。
伪类的顺序在 CSS 中至关重要，因为它们可以根据声明的特异性和顺序相互覆盖。
由 :visited 和 unvisited: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 属性，包括颜色、背景颜色、边框颜色、边框底部颜色、边框左色、边框右色、边框顶部颜色、列规则颜色、轮廓颜色、文本装饰颜色和文本强调颜色。
允许的 SVG 属性：在处理 SVG 元素时，伪类 :visited 可以修改填充和描边属性。
限制 alpha 分量：样式的 alpha（透明度）组件将被忽略。取而代之的是，使用元素的 non- :visited 状态中的 alpha 分量。在某些浏览器（例如 Firefox）中，当 alpha 组件设置为 0 时，在某些情况下，可以完全忽略在 :visited 状态下应用的样式。
Window.getComputedStyle 方法的行为：window.getComputedStyle 方法不反映与伪类 :visited 一起应用的样式。它始终返回 non- :visited 颜色的值。
:visited 和<link>元素：伪类 :visited 不以 <link> 元素为目标。因此，使用 :visited 应用的样式不会影响通常用于外部样式表的元素。

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

打印本页