CSS :link 选择器

CSS :link 伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。

实例

选择未被访问的链接，并设置其样式：

<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="https://cankaoshouce.com">cankaoshouce</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>备注：</b>:link 选择器为未被访问过的链接设置样式。</p>
</body>
</html>

运行一下

浏览器支持

选择器
:link	4.0	7.0	2.0	3.1	9.6

定义和用法

:link 选择器用于选取未被访问的链接。

注释：:link 选择器不会设置已经访问过的链接的样式。

提示：请使用 :visited 选择器对指向已访问页面的链接设置样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于设置点击链接时的样式。

更多实例

例子 1

选择未访问、已访问、悬浮和活动链接，并设置它们的样式：

<!DOCTYPE html>
<html>
<head>
<style>
/* 未访问的链接 */
a:link {
  color: green;
}
/* 访问过的链接 */
a:visited {
  color: green;
}
/* 鼠标悬停链接 */
a:hover {
  color: red;
}
/* 选取的链接 */
a:active {
  color: yellow;
}
</style>
</head>
<body>
<p>鼠标悬停并单击链接: <a href="https://cankaoshouce.com">cankaoshouce.com</a></p>
</body>
</html>

运行一下

例子 2

为链接设置不同的样式：

<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
</head>
<body>
<p>将鼠标移到链接上可以看到它们更改布局。</p>
<p><a class="ex1" href="/css/css-course.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/css/css-course.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/css/css-course.html">这个链接改变背景颜色。</a></p>
<p><a class="ex4" href="/css/css-course.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/css/css-course.html">这个链接改变文本装饰。</a></p>
</body>
</html>

运行一下

CSS :link 选择器

实例

浏览器支持

定义和用法

更多实例

例子 1

例子 2

相关页面

分类导航