掌握动态伪类：理解a, b, div元素的鼠标交互效果-优快云博客

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/125345027

本文详细解读了HTML中的动态伪类link、visited、hover、focus和active，展示了它们在不同元素和状态下的应用，并强调了PC端与移动端的区别。重点介绍了a标签和各种元素的焦点状态实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态伪类

定义在连接上面的伪类

link：用来定义连接未被访问的样式
visited：用来定义连接已经被访问过的样式（默认状态下是跟踪了用户的行为）

定义用户行为的伪类（显示顺序hover-focus-active）

hover：用来定义用户用鼠标划过对应的元素，可是未激活显示的样式
focus：用来定义一个元素自己具有焦点（接受键盘、鼠标、form的输入等）以后，显示的样式
active：用来定义用户按下鼠标后，可是并未离开时候的样式，一般是左侧的鼠标
:link

        <style>
            a:link{background-color: red}
            div:link{background-color: green}
            </style>
            <body>
                <p><a>无href</a></p>
                <p><a href="">a href</a></p>
                <p><div href="">div href</div></p>
            </body>

:link 只能用于 a 标签，并且标签带有 href 属性时，才会匹配到。
在这里插入图片描述

:visited

<style>
a:link{background-color: red}
a:visited{background-color: green}
</style>
<body>
    <a href="#1">1-1</a>
    <a href="#2">1-2</a>
    <a href="#2">1-3</a>
</body>

当点击 1-2 中的链接后，1-2会应用到 :visited 状态。同时由于 1-3 与 1-2 访问的链接一样，1-3 也会变成绿色。
在这里插入图片描述

:active

<style>
a:link{background-color: red}
a:active{background-color: green}
button:active{background-color: yellow}
</style>
<body>
    <a href="#1">1-1</a>
    <button>按钮1</button>
</body>

表示元素被鼠标按下，但未松开前的状态。适用于所有元素，该状态在移动端浏览器下无效。
在这里插入图片描述

:hover

<style>
a:hover{background-color: yellow}
button:hover{background-color: yellow}
span:hover{background-color: yellow}
div:hover{background-color: yellow}
</style>
<body>
    <a href="#1">1-1</a>
    <button>按钮1</button>
    <span>1-3</span>
    <div>1-4</div>
</body>

表示元素在鼠标进入时匹配该样式，移出元素后会被取消。适用于所有元素，该状态在移动端浏览器下无效。
在这里插入图片描述

:focus

<style>
a:focus{background-color: yellow}
button:focus{background-color: yellow}
span:focus{background-color: yellow}
div:focus{background-color: yellow}
input:focus{background-color: yellow}
</style>
<body>
    <a href="#1">1-1</a>
    <button>按钮1</button>
    <span>1-3</span>
    <div>1-4</div>
    <input value="1-5">
</body>