link
CSS :link Pseudo Class
The :link pseudo-class is used to select and style unvisited links in a page. It applies to links that have not yet been visited.
An element can be both :visited and :active so as the :link pseudo-class will have an effect.
:active, :hover, or :visited pseudo-classes override the style defined by the :link pseudo-class. For styling links properly, the :link rule should be placed before all other link-related rules (:link, :visited, :hover, :active).
The :link pseudo-class matches every unvisited <a>, <area>, or <link> element that has a href attribute. （归因于）
Version
Version （版本）
HTML Living Standard （生活水平）
Selectors Level 4 （选择器级别4）
Selectors Level 3 （选择器级别3）
Syntax
Syntax （语法）
:link {
css declarations;
}
Example of the :link selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<a href="https://www.w3cdoc.com">w3cdoc</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>
Example of the :link selector with the <p> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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.w3cdoc.com/">website</a>.
</p>
</body>
</html>
In this example, mouse over the links and watch how they will be changed:
Example of the :link pseudo-class with :hover and :visited:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>