html中a:link、a:hover、a:active、a:visited的用法以及注意事项

最新推荐文章于 2024-05-09 09:46:47 发布

学霸女神

最新推荐文章于 2024-05-09 09:46:47 发布

阅读量2.4k

点赞数

分类专栏： HTML5 文章标签： html5 css Powered by 金山文档

本文链接：https://blog.csdn.net/qq_56545699/article/details/129424343

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里我设置了表格里的文字设置链接，然后设置：

链接刚开始的文字颜色：黑色

链接刚开始的背景颜色：绿色

鼠标悬停时文字颜色：蓝色（背景颜色不变）

点击链接时文字颜色：红色

点击链接时背景颜色：蓝色

链接访问过之后文字颜色：紫色

然后又重新设置了一下链接访问过的背景颜色，因为如果不设置背景颜色，就会恢复成默认的白色，这里是将背景颜色设置成了最开始的背景颜色

<!DOCTYPE html>
<html>
    <head>
        <style>
            /*link:链接正常的样式;*/
            a:link{
                display:block; 
                width: 100px;  
                color:black;
                background-color:green;
                text-align:center;
                font-weight: bold;
                text-decoration: none;/*不显示下划线*/
            }
            /*鼠标悬停的样式*/
            a:hover{
                color:blue;
                text-align:center;
                text-decoration: none;
            }
             /*鼠标点击的样式*/
            a:active{
                color:red;
                background-color:blue;
                text-align:center;
                text-decoration: none;
            }  
             /*链接访问过的样式*/
            a:visited{
                text-align:center;
                color:purple;
                background-color:green;/*因为如果不设置背景颜色，就会恢复成默认的白色，这里是将背景颜色设置成了最开始的背景颜色*/
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                //以下设置均为空标签，主要观看颜色变化比较方便
                <td><a href="#">标签一</a></td>
                <td><a href="#">标签二</a></td>
                <td><a href="#">标签三</a></td>
                <td><a href="#">标签四</a></td>
                <td><a href="#">标签五</a></td>
                <td><a href="#">标签六</a></td>
            </tr>
        </table>
    </body>
</html>

遇到的问题：

运行html文件后，悬浮和点击链接时没有颜色变化

可以检查一下这四个样式设置的顺序，在最开始我将a:link放在了最后，当我将a:link放在了最开始的时候就正确了

点击一个链接之后，返回网页，所有的链接都变成已访问过的颜色

是不是在测试的效果的时候都点过所有的链接，这里浏览器会有缓存记录，可以换一个浏览器试试

学霸女神

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html中a:link、a:hover、a:active、a:visited的用法以及注意事项

主要有两个问题：运行html文件后，悬浮和点击链接时没有颜色变化；点击一个链接之后，返回网页，所有的链接都变成已访问过的颜色。
复制链接

扫一扫