CSS中<a>标签伪类顺序

最新推荐文章于 2023-04-01 11:47:41 发布

deng131

最新推荐文章于 2023-04-01 11:47:41 发布

阅读量165

点赞数

分类专栏： stylesheet 文章标签： CSS 浏览器 .net HTML

本文链接：https://blog.csdn.net/deng131/article/details/83709707

版权

stylesheet 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<style type="text/css">
a:link{color:black;}
a:visited{color:blue;}
a:hover{color:red;}
a:active{color:green;}
</style>
<a href="#"> content </a>

[color=blue]根据CSS就近原则，从底往向上顺序查找，一直找到满足条件的定义为止。[/color]
A标签的4个伪类：
[table]
| 1. ':link' ：适用于未被访问的链接；|
| 2. ':visited' ：适用于已经访问过的链接；|
| 3. ':hover' ：鼠标指针指向一个元素，还未激活；|
| 4. ':active' ：适用于一个元素被选择但未被释放；|
[/table]

W3C制定的CSS21规范中指出：四个伪类的声明顺序应该是：':link'、':visited'、':hover'、':active'。 A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover内定义的相同规则。同理，A:active应在A:hover 之后，否则A:active中的相同规则将被隐藏。原因应该就在于浏览器解释CSS时遵循的“就近原则”。

推荐大家以后按照 L-V-H-A 的顺序来定义 <a> 标签的伪类样式。这样在各个浏览器里就都一样了。可以记这两个词：LOVE--HATE。

参考：
[url]http://topic.csdn.net/u/20100630/14/7223adb9-3d4b-4869-9eaa-a424badeaeac.html[/url]

deng131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中<a>标签伪类顺序

[code="java"]a:link{color:black;}a:visited{color:blue;}a:hover{color:red;}a:active{color:green;} content [/code][color=blue]根据CSS就近原则，从底往向上顺序查找，一直找到满足条件的定义为止。[/color]A标签的4个伪类：[tabl...
复制链接

扫一扫