:link、:hover、:active和:visited

CSS伪类应用

最新推荐文章于 2023-10-11 16:12:43 发布

原创最新推荐文章于 2023-10-11 16:12:43 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

本文介绍CSS中四种链接伪类选择器的使用方法：:link、:visited、:hover和:active，通过实例展示了如何为不同状态下的链接设置背景颜色。

:link、:hover、:active和:visited

:link表示鼠标点击之前，也称为原始状态
:hover表示鼠标悬停状态
:active表示鼠标点击状态
:visited表示鼠标点击之后状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>isolated star学习四个伪类选择器</title>
    <style type="text/css">
        /*点击之前*/
        a:link {
            background-color: red;
        }
        /*鼠标悬停状态*/
        a:hover {
            background-color: green;
        }
        /*点击状态*/
        a:active {
            background-color: blue;
        }
        /*点击之后状态*/
        a:visited {
            background-color: gray;
        }
        /*改变文字的默认颜色以及消除下划线*/
        a{
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!--伪类元素选择器(原始状态[:link];鼠标悬停状态[:hover];点击状态[:active];点击之后[:visited])-->
    
</body>
</html>