试一试
p {
font-weight: bold;
}
a:link {
color: forestgreen;
text-decoration-color: hotpink;
}
<p>Pages that you might have visited:</p>
<ul>
<li>
<a href="https://mdn.org.cn">MDN Web Docs</a>
</li>
<li>
<a href="https://www.youtube.com/">YouTube</a>
</li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
<li>
<a href="https://mdn.org.cn/missing-2">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-2">Random Example page</a>
</li>
</ul>
由 :link 和 :visited 伪类定义的样式可以被任何后续具有至少相同特异性的用户行为伪类（:hover 或 :active）覆盖。为了正确地设置链接样式，请将 :link 规则放在所有其他与链接相关的规则之前，遵循 LVHA 顺序：:link — :visited — :hover — :active。:visited 伪类和 :link 伪类是互斥的。
注意： 使用 :any-link 来选择一个元素，无论它是否已被访问。
语法
css
:link {
/* ... */
}
示例
默认情况下，大多数浏览器会为已访问的链接应用特殊的 color 值。因此，此示例中的链接可能只在您访问它们之前具有特殊的字体颜色。（之后，您需要清除浏览器历史记录才能再次看到它们。）然而，background-color 值可能会保留，因为大多数浏览器默认不会为已访问的链接设置该属性。
HTML
html
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>
CSS
css
a:link {
background-color: gold;
color: green;
}
结果
规范
| 规范 |
|---|
| HTML # selector-link |
| 选择器 Level 4 # link-pseudo |
浏览器兼容性
加载中…