a元素伪类

水沉草木

于 2022-05-16 20:29:32 发布

阅读量90

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_69761234/article/details/124807336

版权

:link 用来表示未访问过的链接

:visited 用来表示访问过的链接

注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色

:hover 鼠标移入的效果

:active 鼠标点击效果

注意：

1:link visited 只对a标签产生效果，hover active 对所有标签都可以产生效果

2:如果要同时设置这四个伪类，那么伪类是有顺序要求的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 需求一：给未访问过的超链接加红色 */
        /* 需求二：给访问过的超链接加绿色 */
        /* 需求三：鼠标移入到元素后，字体变橘色 */
        /* 需求四：点击超链接的时候，字体变大30px */
      
        p:hover{
            background-color: orchid;
        }
        a:link{
            color: red;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: orange;
        }
        a:active{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- <a href="#">超链接</a> -->
    <a href="https://www.mi.com/">小米</a>
    <a href="./测试1.html">测试1</a>
    <a href="./测试2.html">测试2</a>
    <p>哈啊哈哈</p>
</body>
</html>

水沉草木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a元素伪类

:link 用来表示未访问过的链接:visited 用来表示访问过的链接注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色:hover 鼠标移入的效果:active 鼠标点击效果注意： 1:link visited 只对a标签产生效果，hover active 对所有标签都可以产生效果 2:如果要同时设置这四个伪类，那么伪类是有顺序要求的<!DOCTYPE html><html...
复制链接

扫一扫