a标签伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布

只字不留

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/qq15045846160/article/details/88583786

版权

一、四种状态：

默认状态 a:link
点击后状态 a:visited
悬停状态 a:hover
长按状态 a:active

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a标签伪类选择器</title>
        <style>
            /* 修改未访问过状态 */
            a:link{
                color: tomato;
            }
            /* 访问过 */
            a:visited{
                color: green;
            }
            /* 鼠标悬停 */
            a:hover{
                color: antiquewhite;
            }
            /* 长按 */
            a:active{
                color: blueviolet;
            }
            /* 
            未访问过与访问过颜色相同时，可简写
            a{
                color:pink;
            }
             */
        </style>
    </head>
    <body>
        <!-- 
            如果四个伪类选择器一同出现，应该按照以上顺序要求编写（）      
         -->
        <a href="http://www.taobao.com">taobao</a>
        <a href="http://www.jd.com">jd</a>
    </body>
</html>

二、实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a标签伪类选择器</title>
        <style>
            *{
                /* YUI */
                margin: 0;
                padding: 0
            }
            ul{
                width: 960px;
                height: 40px;
                background-color: green;
                margin: 100px auto;
            }
            ul li{
                list-style: none;
                width: 120px;
                height: 40px;
                float: left;
                background-color: rgba(238, 255, 192, 0.904);
                text-align: center;
                line-height: 40px;
            }
            /* 设置a标签的大小 */
            ul li a{
                display: inline-block;
                width: 120px;
                height: 40px;
            }
            ul li a:link{
                color: white;
                text-decoration: none;
            }
            ul li a:hover{
                color: red;
                background-color: #ccc;
            }
            ul li a:active{
                color: aquamarine
            }
        </style>
    </head>
    <body>
        <ul>
            <!-- ul>(li>a)*8 长按alt，添加# -->
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
            <li><a href="#">我是导航</a></li>
        </ul>
    </body>
</html>

在这里插入图片描述

只字不留

关注

2
点赞
踩
7

收藏

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

一、四种状态：默认状态 a:link点击后状态 a:visited悬停状态 a:hover长按状态 a:active&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;a标签伪类选择器&lt;/..
复制链接

扫一扫