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>