本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！
导读：本小节讲解与 <a> 元素有关的伪类选择器，主要包含动态伪类选择器和目标伪类选择器两种。这两种伪类选择器的主要应用场景都是与 <a> 元素有关的，并且通过这两种伪类选择器可以实现比较丰富的效果。
动态伪类选择器
动态伪类选择器可以划分为链接中锚点的伪类选择器和用户行为的伪类选择器，具体如下表所示：
| 伪类选择器 | 类型 | 描述 |
|---|---|---|
e:link | 链接锚点伪类选择器 | 匹配的 e 元素，定义了超链接并且未被访问过 |
e:visited | 链接锚点伪类选择器 | 匹配的 e 元素，定义了超链接并且已被访问过 |
e:active | 用户行为伪类选择器 | 匹配的 e 元素，定义了超链接并且被激活 |
e:hover | 用户行为伪类选择器 | 匹配的e元素，定义了超链接并且用户鼠标悬停在链接文本内容上 |
e:focus | 用户行为伪类选择器 | 匹配的 e 元素，定义了超链接并且获得焦点 |
如下示例代码展示了动态伪类选择器在 <a> 元素上应用：
a:link { color: #FF0000 } /* 未访问的链接 */
a:visited { color: #00FF00 } /* 已访问的链接 */
a:hover { color: #FF00FF } /* 鼠标移动到链接上 */
a:active { color: #0000FF } /* 选定的链接 */动态伪类选择器并不是只能应用于 <a> 元素，其他 HTML 元素同样可以使用动态伪类选择器。例如在 HTML 页面中的 <button> 按钮元素可以配合 :hover 伪类选择器来使用，如下示例代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态伪类选择器</title>
<style>
/* 鼠标移动到链接上 */
button:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<button>这是一个按钮</button>
</body>
</html>上述示例代码运行效果如下图所示：
注意：在触摸屏上
:hover基本不可用。不同的浏览器上:hover伪类表现不同。
目标伪类选择器
目标伪类选择器指的是 CSS 中的 :target 伪类选择器，该伪类选择器用来设置 <a> 元素锚点功能中的目标元素的样式。如下示例代码展示了 :target 伪类选择器的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>目标伪类选择器</title>
<style>
p:target {
background-color: gold;
}
/* 在目标元素中增加一个伪元素*/
p:target::before {
font: 70% sans-serif;
content: "►";
color: limegreen;
margin-right: .25em;
}
/*在目标元素中使用italic样式*/
p:target i {
color: red;
}
</style>
</head>
<body>
<h3>Table of Contents</h3>
<ol>
<li><a href="#p1">Jump to the first paragraph!</a></li>
<li><a href="#p2">Jump to the second paragraph!</a></li>
<li><a href="#nowhere">This link goes nowhere,
because the target doesn't exist.</a></li>
</ol>
<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
from the links above. Isn't that delightful?</p>
</body>
</html>上述示例代码运行效果如下图所示：
总结
本小节讲解了有关动态伪类选择器和目标伪类选择器的用法。这两种伪类选择器虽然主要的应用场景是与 <a> 元素有关，但并不是只能和 <a> 元素配合使用。
预告：下一节，我们将讲解图像的相关内容。
如要转载本文，请先加作者微信(2080954535，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！
36
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
