锚伪类link、hover、active、visited

最新推荐文章于 2023-03-09 16:23:42 发布

绿仔牛奶_

最新推荐文章于 2023-03-09 16:23:42 发布

阅读量1.2k

点赞数 1

分类专栏： Web前端核心技术文章标签： html css3 css

本文链接：https://blog.csdn.net/yuqu1028/article/details/125127421

版权

Web前端核心技术专栏收录该内容

16 篇文章 0 订阅

订阅专栏

锚点伪类

锚点链接的伪类主要针对于我们a标签样式进行设置，下面给出四个标签作用

link标签：未被访问过的链接
hover 应用于鼠标悬停到的元素
active 应用于被激活的元素
visited 应用于被访问过的链接

代码片：

<!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>测试</title>
<style>
    /* 
        link标签：设置未访问之前的颜色，效果跟直接设置a标签颜色相同
        visited标签：只能设置字体颜色！！！！
        hover标签：用于设置当鼠标经过或悬停时链接文本的样式
        active标签：鼠标点击（按住不放）的时候该链接文本的样式
        */
    a{
        color:cadetblue;
    }
    a:visited{
        color: #333333;
    }
    a:hover{
        background-color: skyblue;
    }
    a:active{
        width: 50px;
        height: 50px;
        background-color: tomato;
    }
</style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <a href="https://zhidao.baidu.com" target="_blank">百度知道</a>
    <a href="https://wenku.baidu.com" target="_blank">百度文库</a>

</body>
</html>