零基础学习CSS(5)——:link、:visited、:hover、:active、:focus

Dragon水魅

发布于 2026-01-23 14:49:39

950

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

:link 选择器：https://man.ilovefishc.com/pageCSS3/dotlink.html :visited 选择器：https://man.ilovefishc.com/pageCSS3/dotvisited.html :hover 选择器：https://man.ilovefishc.com/pageCSS3/dothover.html :active 选择器：https://man.ilovefishc.com/pageCSS3/dotActive.html :focus 选择器：https://man.ilovefishc.com/pageCSS3/dotfocus.html

:link 选择器：定制链接未被访问时的样式。 :visited 选择器：定制链接被访问过的样式。 :hover 选择器：定制鼠标悬停在连接上方时候的样式。 :active 选择器：定制鼠标按下链接那一刻时候的样式。

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 为 a 元素定制4个状态的样式 */
        
        /* 链接未被访问的时候 */
        a:link {
            color: pink;
        }

        /* 链接被访问过的时候 */
        a:visited {
            color: red;
        }

        /* 鼠标悬停在链接上方时 */
        a:hover {
            color: black;
        }

        /* 鼠标按下链接的那一刻 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>

hover 、active 同样可以用于那些其他的元素：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">

        div {
            background-color: red;
            color: white;
            padding: 25px;
            text-align: center;
        }
        /* 悬浮样式 */
        a:hover {
            color: pink;
        }

        /* 点击 div 时改变样式 */
        div:active {
            background-color: green;
        }
        
    </style>
</head>
<body>
    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim hic temporibus velit ipsa atque, minus quam quasi eos. Accusantium velit blanditiis dicta odio. Accusamus ea minus, iure facilis odio sed.</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti ex tempora non vitae necessitatibus? Architecto voluptates perspiciatis aut ipsam omnis quae provident vel iure unde commodi exercitationem, accusamus cumque nobis?</p>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>

:focus 选择器，选取当获得鼠标焦点时的元素：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        input#boy:focus {
            background-color: cyan;
        }

        input#girl:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
    <form>
        <label>他的名字：</label>
        <input type="text" name="name" id="boy">
        <br><br>        
        <label>她的名字：</label>
        <input type="text" name="name" id="girl">
    </form>
</body>
</html>