【前端开发】：CSS中的链接伪类选择器

原创于 2021-02-06 09:23:00 发布 · 270 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何利用CSS伪类选择器`:link`、`:visited`、`:hover`和`:active`为链接添加不同状态的颜色效果。通过示例代码展示了如何将未访问链接设置为红色，已访问链接设置为灰色，鼠标悬停时变为白色，活动链接则显示为黑色，从而实现链接的个性化视觉设计。

链接伪类选择器也是一种选择器，它可以向某些选择器当中添加特殊的效果。比如给链接添加特殊的效果。它的使用方法如下所示：

:link /# 未访问的链接#/
:visited /# 已经访问的链接#/
:hover /#鼠标移动到链接上 #/
:active /# 选定的链接#/

用了这四个关键字，我们就可以对链接的颜色进行自定义了，我们可以定义其未访问的链接，已经访问的链接，鼠标移动到链接上，以及选定的链接的样式和颜色了。

点击之后的效果如下所示：原本未访问时的链接颜色我们定义为了红色，访问后我们定义为了灰色。鼠标进行选定时，我们定义为了白色

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪链接选择器</title>
    <style>
    a:link
    {
    color:red;
    }
    a:visited
    {
    color:gray;
    }
    a:hover
    {
    color:white;
    }
    a:active:
    {
    color:black;
    }
    </style>
</head>
<body>
<div><a href="##">秒杀</a></div>
</body>
</html>

标签