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>
因此我们得出结论:a:link 也是有存在的意义的,它可以定义 非占位a标签的所有样式。
a:link 与 a:visited 是根据浏览器的历史记录来判断 a 标签中的 href 链接有没有被访问过。
参考:《CSS权威指南》