CSS - 伪类 :link

CSS 伪类选择器 :link 匹配或表示尚未访问过的元素，即所有 <a> 和 <area> 元素，具有 href 属性，甚至具有空的 href 属性。

伪类 :link 和 :visited 指定的所有样式都会被任何后续的交互式伪类覆盖，例如：hover 或：active。
为了正确设置链接的样式，您需要将 :link 规则放在所有其他与链接相关的规则之前。
您需要遵循 LVHA 规则，即 :link、:visited、:hover 和 :active。
伪类 :visited 和 :link 是互斥的。

要选择一个元素，而不管它是否已被访问过，请使用伪类 :any-link。


:link {
	 	/* ... */	
}

CSS :link 示例

下面是 :link 伪类的一个例子。在这里，我们看到在锚元素上使用：link 伪类，背景颜色为浅黄色，尚未访问过。


<html>
<head>
<style>
	 	a {
	 	 	 font-size: 1em;
	 	 	 padding: 5px;
	 	 	 display: inline-block;
	 	 	 margin-right: 10px;
	 	}

	 	a:link {
	 	 	 background-color: lightyellow;
	 	}
</style>
</head>
<body>
	 	<h2>:link selector example</h2>
	 	<strong><a href="#">QikepuCom</a></strong>
	 	<strong><a href="#">Google</a></strong>
</body>
</html>

下面是一个 :link 伪类和 :hover 伪类的例子。将鼠标悬停在锚点元素上，并观察更改的背景颜色。


<html>
<head>
<style>
	 	a {
	 	 	 font-size: 1em;
	 	 	 padding: 5px;
	 	 	 display: inline-block;
	 	 	 margin-right: 10px;
	 	}

	 	a:link {
	 	 	 background-color: lightyellow;
	 	}

	 	a:hover {
	 	 	 background-color: lightsalmon;
	 	 	 color: green;
	 	}
</style>
</head>
<body>
	 	<h2>:link selector example</h2>
	 	<strong><a href="#">QikepuCom</a></strong>
	 	<strong><a href="#">Google</a></strong>
</body>
</html>

打印本页