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

本文详细解析了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>

image-20200623192214519

因此我们得出结论:a:link 也是有存在的意义的,它可以定义 非占位a标签的所有样式。

a:link 与 a:visited 是根据浏览器的历史记录来判断 a 标签中的 href 链接有没有被访问过。

参考:《CSS权威指南》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值