a 标签的四个伪类样式优先级

最新推荐文章于 2024-10-18 10:41:41 发布

theSunAndSnow

最新推荐文章于 2024-10-18 10:41:41 发布

阅读量856

点赞数

分类专栏：前端学习笔记 CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44960253/article/details/106930667

版权

前端学习笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文详细解析了a标签的四个伪类样式优先级：a:link、a:visited、a:hover和a:active，强调了正确的定义顺序以确保所有状态都能正确显示。此外，还探讨了a:link存在的必要性，特别是在href属性未定义时，它能为非占位a标签定义样式。

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

a 标签的四个伪类样式优先级

a:link定义链接样式，针对尚未访问的链接。

a:visited定义鼠标点击后的链接样式。也就是已访问过的链接的样式。

:focus 定义标签获得鼠标焦点（游标）时的样式。

a:hover定义鼠标移入 a 标签时的链接样式。

a:active定义鼠标点击瞬间的链接样式，active 当然可以用在其它标签上

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

其实对锚伪类顺序的严格要求是充分考虑

鼠标从未选中 a 标签 --》悬浮在 a 标签中–》到点击 a 标签。

以及任何 a 标签都是有未访问状态（:link）或已访问状态（:visited）。

只有遵循了锚伪类定义的顺序，才可以使上文 a 标签的所有状态都可以显示相应的样式。否则会因为优先级（特指度）问题导致相应 a 标签状态不显示样式。根据 a 标签的状态你也可以理解到因为 a 标签只可能已访问或未访问，因此 :link 与 :visited 伪类之间并不冲突，所以这两个伪类之间的定义顺序是没有特殊要求的。

a:link { /* 定义未访问过的链接颜色 */
	color: red;
}
a:visited { /* 定义链接已浏览过后为灰色 */
	color: gray;
} 
a:hover { /* 定义鼠标移入时为绿色 */
	color: green;
}
a:active { /* 定义已访问的链接为粉色 */
	color: plum;
}

你可能会好奇，会觉得 :link 伪类多此一举，直接用 a 标签和 a:visited 不就可以判断出所有已访问与未访问 a 标签了吗？

但实际上，在实际开发中可能会出现占位a标签（定义了 a 标签的内容，但是我还不知道 a 标签的 href 属性是多少，所以 href 暂时不定义了，我以后一定会填上这个坑位）。这个时候我们便会惊奇的发现：a:link 竟然无法定义占位a标签的样式！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: red;
        }
        a:link {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a>bing</a>
    <br>
    <a href="https://www.baidu.com">辣鸡百度</a>
</body>
</html>