:link
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
尝试一下
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://developer.mozilla.org">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://developer.mozilla.org/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
)覆盖。为了适当地为链接设置样式,请按照 LVHA 顺序将 :link
规则放置在所有其他与链接相关的规则之前,顺序为 :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; }
结果
规范
Specification |
---|
HTML # selector-link |
Selectors Level 4 # link-pseudo |