前端第三波

最新推荐文章于 2022-10-09 16:59:57 发布

空巷挽清风

最新推荐文章于 2022-10-09 16:59:57 发布

阅读量203

点赞数 1

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/kong_xiang/article/details/89712690

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

前端第三波

伪类：

挺有意思的一个模块

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，，和鼠标悬停状态，活动状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

实例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        .nev{
            text-align:center;          /*块水平居中*/
        }
        a{
            color:#333;                 /*设置文字的颜色，因为有些浏览器的痕迹一直存在，所以就加此代码，使链接的颜色每次初始化*/
        }
        .nev a:link{                    /*设置元素最原始的状态属性*/
            width:120px;                /*设置块的宽度*/
            height:50px;                /*设置块的高度*/
            display:inline-block;       /*设置该链接为行内块元素*/
            background-color:orange;
            background-image: url(img/bg.png);   /*为元素设置背景图像。*/
            font-weight:700;            /*设置文字加粗*/
            font-size:20px;             /*设置文字大小*/
            color: #333;                /*设置文字的颜色*/
            text-decoration:none;       /*取消文字的装饰，在这里作用为取消链接的下划线*/
            line-height:50px;           /*设置文字在水平方向的距离边框的距离*/
        }
        .nev a:visited{                 /*设置链接被访问之后的状态属性*/
            color:red;
        }
        .nev a:hover{                   /*设置当鼠标放置在链接模块上时的状态属性*/
            background-color:blue;
            background-image: url(img/bgc.png);
        }
        .nev a:active{                  /*设置链接模块被点击但是鼠标未抬起时的链接状态属性*/
            color:green;
        }
    </style>
</head>
<body>
    <div class="nev">
        <a href="text.html">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </div>
</body>
</html>

空巷挽清风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端第三波

前端第三波伪类：挺有意思的一个模块在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，，和鼠标悬停状态，活动状态。a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠...
复制链接

扫一扫