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

最新推荐文章于 2023-11-23 15:19:37 发布

Geeksongs

最新推荐文章于 2023-11-23 15:19:37 发布

阅读量196

点赞数 1

本文链接：https://blog.csdn.net/Geeksongs/article/details/113749344

版权

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

摘要由CSDN通过智能技术生成

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

: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>

Geeksongs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端开发】：CSS中的链接伪类选择器

链接伪类选择器也是一种选择器，它可以向某些选择器当中添加特殊的效果。比如给链接添加特殊的效果。它的使用方法如下所示：:link /# 未访问的链接#/:visited /# 已经访问的链接#/:hover /#鼠标移动到链接上 #/:active /# 选定的链接#/用了这四个关键字，我们就可以对链接的颜色进行自定义了，我们可以定义其未访问的链接，已经访问的链接，鼠标移动到...
复制链接

扫一扫