:link 伪类用于选择页面中未访问的链接并为其设置样式。
它适用于尚未访问过的链接。
一个元素既可以是 :visited 又可以是 :active ，这样 :link 伪类就会起作用。
:active、:hover 或者 :visited 伪类覆盖了 :link 伪类定义的样式。
为了正确设置链接样式，:link 规则应该放在所有其他与链接相关的规则之前（:link、:visited、:hover、:active）。
:link 伪类匹配每个未访问的具有 href 属性的 <a>、<area> 或者 <link> 元素。
语法
:link {
css declarations;
}
:link 选择器的例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a:link {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:link 选择器示例</h2>
<a href="https://www.onitroad.com">onitroad</a>
<a href="https://baidu.com/">baidu</a>
</body>
</html>
带有 <p> 标签的 :link 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #ccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>Visit our
<a href="https://www.onitroad.com/">website</a>.
</p>
</body>
</html>
在此示例中，将鼠标悬停在链接上并观察它们将如何更改：
带有 :hover 和 :visited 的 :link 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
display: block;
padding: 5px 0 10px;
font-weight: bold;
}
a.one:link {
color: #ccc;
}
a.one:visited {
color: #095484;
}
a.one:hover {
color: #8ebf42;
}
a.two:link {
color: #ccc;
}
a.two:visited {
color: #095484;
}
a.two:hover {
font-size: 150%;
}
a.three:link {
color: #ccc;
}
a.three:visited {
color: #095484;
}
a.three:hover {
background: #8ebf42;
}
a.four:link {
color: #ccc;
}
a.four:visited {
color: #095484;
}
a.four:hover {
font-family: monospace;
}
a.five:link {
color: #095484;
text-decoration: none;
}
a.five:visited {
color: #095484;
text-decoration: none;
}
a.five:hover {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>
<a class="one" href="#">This link changes color</a>
<a class="two" href="#">This link changes font-size</a>
<a class="three" href="#">This link changes background-color</a>
<a class="four" href="#">This link changes font-family</a>
<a class="five" href="#">This link changes text-decoration</a>
</p>
</body>
</html>
日期：2020-06-02 22:14:37 来源：oir作者：oir