【a】标签的伪类选择器

最新推荐文章于 2024-04-24 19:55:30 发布

叫我邱球球

最新推荐文章于 2024-04-24 19:55:30 发布

阅读量4.6k

点赞数 2

分类专栏：有关CSS 文章标签： css 属性前端心得

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/62228601

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们来学习一下a标签的4个伪类选择器：

①a:link选择器：修改从未被访问过的a标签样式。

②a:visited选择器：修改已经被访问过的a标签样式。

③a:active选择器：修改链接被长按时的样式。

④a:hover选择器：修改鼠标悬停在a标签上的样式。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签伪类选择器</title>
    <style type="text/css">
        .box1:link{
            color: green;
        }
        .box2:visited{
            color: pink;
        }
        .box3:active{
            color: black;
        }
        .box4:hover{
            font-weight: bold;
        }
    </style>
</head>
<body>
<a href="#" class="box1">明天</a>
<hr>
<a href="#" class="box2">你好</a>
<hr>
<a href="#" class="box3">我们</a>
<hr>
<a href="#" class="box4">在路上</a>
</body>
</html>

大家可以粘贴代码试一试，很容易就能理解这些伪类选择器。

------------------------------------分割线----------------------------------

a标签为类选择器的注意点：

①a标签的伪类选择器如果一起出现，那么一定要按照一个严格的标准实现：

先编写未点击状态:link→再编写已点击状态:visited→再编写鼠标悬停状态:hover→最后编写长按状态:active

如果顺序被颠倒，那么可能会没有效果。

编写的顺序要遵守爱恨原则：l(link)o v(visited) e、h(hover) a(active) t e。

②如果默认状态的样式和被访问过的样式一样，那么可以简写成a{color:...;}

---------------------------------分割线--------------------------------------

下面来做一个关于a标签伪类选择器的练习（制作一个导航条）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签伪类选择器之导航条制作</title>
    <style type="text/css">
       div{
           width:964px;
           height: 30px;
           background-color: pink;
           margin:0 auto;
           margin-top: 50px;
           text-align: center;
       }
        div a{
            display: inline-block;
            width: 100px;
            line-height: 30px;
            /*border: 1px solid #000;*/
        }
        a:link{
            color: black;
            font-family: "微软雅黑";
        }
        a:visited{
            color: white;
        }
        a:hover{
            background-color: #cdcdec;
            color: green;
        }
        a:active{
            color: yellow;
        }


    </style>
</head>
<body>
<div>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
</div>
</body>
</html>

大家可以复制粘贴一下代码自己看一下效果（但是一般情况下导航条的制作是用ul li标签来做的。这里我们为了图个方便，就直接用a标签来做）。

最后再特别提醒一下！

一定要注意：如果a标签的四个伪类选择器全部都写上了，一定要根据爱恨原则的顺序进行陈列。

每天进步一点点

叫我邱球球

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【a】标签的伪类选择器

今天我们来学习一下a标签的4个伪类选择器：①a:link选择器：修改从未被访问过的a标签样式。②a:visited选择器：修改已经被访问过的a标签样式。③a:active选择器：修改链接被长按时的样式。④a:hover选择器：修改鼠标悬停在a标签上的样式。举个栗子： a标签伪类选择器 .box1:link{
复制链接

扫一扫