`
jdhh_hcm
  • 浏览: 11701 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

<a>标签的伪类书写顺序问题(转载)

浏览器兼容性问题 
阅读更多

原文地址：http://topic.csdn.net/u/20100630/14/7223adb9-3d4b-4869-9eaa-a424badeaeac.html

向作者致敬！

 

曾经在调试自己的网页是发现过一个问题，链接的文字只有在 IE6 下当鼠标移到上面的时候会变色，在 IE7、IE8 和其它浏览器里都不变色，感觉很奇怪。

先来看一下我原来的代码：

HTML code

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


 
页面为标准模式(声明 DOCTYPE 为 <!DOCTYPE html> 即可，稍后会在“浏览器兼容性”系列中详细介绍浏览器模式)。

以上代码中，我的本意是想让文字在没有访问 (:link) 的时候是黑色，在悬停在文本上方 (:hover) 时是红色，点击到文本上方未释放鼠标时 (:active) 是绿色，而访问过 (:visited) 以后就变成了蓝色。

但是，事与愿违，在 IE6 下，当鼠标移到链接上时，文字会变红，而其他浏览器中都还是黑色。

相信大家也曾经遇到过类似的问题吧。

后来，查了一下W3C标准-- 5.11.2 和 5.11.3 才知道，原来<a>标签的伪类样式定义是有顺序要求的。

简单的介绍一下A 标签的4个伪类：
  1. ':link' ：适用于未被访问的链接；
  2. ':visited' ：适用于已经访问过的链接；
  3. ':hover' ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激活它时；
  4. ':active' ：适用于一个元素被用户激活时。

W3C制定的CSS21规范中指出：这四个伪类的声明顺序应该是：':link'、':visited'、':hover'、':active'。A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover内定义的相同规则。同理，A:active应在A:hover之后，否则A:active中的相同规则将被隐藏。

我想，标准这样制定的原因应该就在于浏览器解释CSS时遵循的“就近原则”。

举例来说：（测试结果中不包含IE6）

我想让未访问链接颜色为黑色，访问过的链接为蓝色，当鼠标移到链接上面的时候变为红色，就像我上面的代码里写的那样。

第一种情况：我定义的顺序是 a:hover、a:link、a:visited，这时会发现：把鼠标放到链接上时，它不会变成红色。

第二种情况：定义顺序变做 a:visited、a:hover、a:link，把鼠标放到未访问过的链接上时，它并不变成红色，只有放在已访问的链接上，链接才会变红。

第三种情况：我把CSS定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成红色啦。

这是因为，一个鼠标经过的未访问链接同时拥有 a:link、a:hover 两种属性，所以在第一种情况下，a:link 离它最近，所以它优先满足 a:link，而放弃 a:hover 的重复定义。

而在最后一种情况下，无论链接有没有被访问过，它首先要检查是否符合 a:hover 的标准（即是否有鼠标悬浮在上面），满足，则变成红色，不满足，则继续向上查找，一直找到满足条件的定义为止。

上面的结果是对 IE7/IE8、火狐、Chrome 和苹果的 Safari 测试得到的。IE6 没有按照标准做，故它在这三种情况下，当鼠标悬浮到链接上的时候链接都会变红。

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

为了好记，可以记这两个词：LOVE--HATE

希望对大家有帮助

分享到：
| 你的元素居中对齐了吗？——关于 'text-ali ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML标签英文单词

    `&lt;a&gt;` 标签定义了超链接，可以链接到其他网页、同一网页中的位置、电子邮件地址或下载文件等。它通过 `href` 属性指定目标URL。 ### &lt;abbr&gt;: Abbreviation `&lt;abbr&gt;` 标签用于定义缩写词。浏览器默认会在鼠标悬停时...

    html知识点笔记整理

    * CSS 伪类：a:link、a:visit、a:hover、a:active JavaScript JavaScript是一种脚本语言，用于控制网页的行为和交互。JavaScript 可以与 HTML 结合使用，实现网页的动态效果。 * JavaScript 的两种书写方式： 1....

    《页面制作》笔记（4.HTML）

    页面上的图片可以用&lt;img&gt;标签表示，列表可以用&lt;ul&gt;、&lt;ol&gt;或&lt;dl&gt;来创建，而表格则使用&lt;table&gt;、&lt;tr&gt;、&lt;th&gt;、&lt;td&gt;等标签来构成。 HTML的发展历史中经历了多个版本，包括早期的HTML、XHTML，以及现代的HTML5。HTML5是...

    设计模式part2

    设计一个文档编&lt;br&gt;辑器 22&lt;br&gt;2.1 设计问题 23&lt;br&gt;2.2 文档结构 23&lt;br&gt;2.2.1 递归组合 24&lt;br&gt;2.2.2 图元 25&lt;br&gt;2.2.3 组合模式 27&lt;br&gt;2.3 格式化 27&lt;br&gt;2.3.1 封装格式化算法 27&lt;br&gt;2.3.2 Compositor和Composition ...

    设计模式part1

    设计一个文档编&lt;br&gt;辑器 22&lt;br&gt;2.1 设计问题 23&lt;br&gt;2.2 文档结构 23&lt;br&gt;2.2.1 递归组合 24&lt;br&gt;2.2.2 图元 25&lt;br&gt;2.2.3 组合模式 27&lt;br&gt;2.3 格式化 27&lt;br&gt;2.3.1 封装格式化算法 27&lt;br&gt;2.3.2 Compositor和Composition ...

    《设计模式》

    设计一个文档编&lt;br&gt;辑器 22&lt;br&gt;2.1 设计问题 23&lt;br&gt;2.2 文档结构 23&lt;br&gt;2.2.1 递归组合 24&lt;br&gt;2.2.2 图元 25&lt;br&gt;2.2.3 组合模式 27&lt;br&gt;2.3 格式化 27&lt;br&gt;2.3.1 封装格式化算法 27&lt;br&gt;2.3.2 Compositor和Composition ...

    设计模式中文版 1

    设计模式中文版这个有10m很大我分2次传&lt;br&gt;目 录&lt;br&gt;序言&lt;br&gt;前言&lt;br&gt;读者指南&lt;br&gt;第1章 引言 1...237&lt;br&gt;6.11 临别感想 237&lt;br&gt;附录A 词汇表 238&lt;br&gt;附录B 图示符号指南 241&lt;br&gt;附录C 基本类 244&lt;br&gt;参考文献 249&lt;br&gt;

    html 详细课堂笔记html 详细课堂笔记

    &lt;b&gt;是粗体标签，&lt;strong&gt;是加粗标签，&lt;em&gt;是强调字体，&lt;i&gt;是斜体，小号字体是&lt;small&gt;，大号字体是&lt;big&gt;。 3.5 文本标签 文本标签用于实现标签的样式处理。常见的文本标签包括&lt;h1&gt;、&lt;h2&gt;、&lt;h3&gt;、&lt;h4&gt;、&lt;h5&gt;、&lt;h6&gt;等...

    网页制作与实训ppt完整版PPT幻灯片教学教程最全电子讲义教案.ppt

    通过这些基础标签，我们可以创建出基本的网页布局，并逐步学习更复杂的功能，如表格（&lt;table&gt;）、链接（&lt;a&gt;）、图片（&lt;img&gt;）、表单（&lt;form&gt;，包括文本框&lt;input type="text"&gt;、密码框&lt;input type="password"&gt;、下拉...

    html教程（42页）

    比如，段落是由&lt;p&gt;标签定义的，标题是由&lt;h1&gt;到&lt;h6&gt;一系列的标签定义的，换行可以用&lt;br&gt;标签来实现，而水平线则使用&lt;hr&gt;标签。 HTML中的注释用&lt;!-- 注释内容 --&gt;格式书写，它不会显示在浏览器上，但可以用来为代码做...

    html5常用标签.txt

    2. **`&lt;a&gt;`**: 链接标签，用于创建超链接。 3. **`&lt;map&gt;`**: 定义图像中的可点击区域。 4. **`&lt;area&gt;`**: 图像映射中的一个热点。 5. **`&lt;figure&gt;`**: 包含图片或其他媒体的内容，并可以有标题。 6. **`...

    谭浩强C语言

    1 C语言概述 2&lt;br&gt;1.1 Ｃ语言的发展过程 2&lt;br&gt;1.2 当代最优秀的程序设计...&lt;br&gt;1.10 书写程序时应遵循的规则 6&lt;br&gt;1.11 Ｃ语言的字符集 6&lt;br&gt;1.12 Ｃ语言词汇 7&lt;br&gt;1.13 Turbo C 2.0集成开发环境的使用 8&lt;br&gt;1.13.1 ...

    HTML学习笔记

    9. `&lt;body&gt;`内的元素：`&lt;p&gt;`定义段落，`&lt;br&gt;`实现换行，`&lt;pre&gt;`保留原始格式的文本，`&lt;h1&gt;`至`&lt;h6&gt;`定义标题等级，`&lt;b&gt;`、`&lt;em&gt;`、`&lt;i&gt;`、`&lt;u&gt;`、`&lt;tt&gt;`、`&lt;sup&gt;`、`&lt;sub&gt;`和`&lt;s&gt;`分别表示加粗、强调、斜体、下划线...

    web程序设计实验报告集合.doc

    1. 学习并掌握常见的HTML标记，例如`&lt;HTML&gt;`、`&lt;HEAD&gt;`、`&lt;TITLE&gt;`、`&lt;BODY&gt;`、`&lt;H1&gt;`、`&lt;B&gt;`、`&lt;I&gt;`、`&lt;FONT&gt;`、`&lt;MARQUEE&gt;`、`&lt;HR&gt;`、`&lt;H2&gt;`、`&lt;EM&gt;`、`&lt;P&gt;`、`&lt;UL&gt;`、`&lt;LI&gt;`、`&lt;A&gt;`、`&lt;TABLE&gt;`、`&lt;TH&gt;`、`&lt;TD&gt;`等...

    XHTML手册查询（很好用）

    4. **链接与图像**：&lt;a&gt;标签用于创建超链接，&lt;img&gt;标签用于插入图像，两者都需要指定源（href或src），同时&lt;img&gt;还需要alt属性，为无法显示图像的用户提供替代文本。 5. **表格**：&lt;table&gt;、&lt;tr&gt;、&lt;th&gt;（表头）和...

    一本FPGA方面未出版的书

    约束文件的编写&lt;br&gt;第5节 ISE与第三方软件&lt;br&gt;第5节 Verilog代码书写规范&lt;br&gt;第5节 XPS软件的高级操作&lt;br&gt;第5节 XPS软件的高级操作2&lt;br&gt;第5节 ystem Generator的高级应用&lt;br&gt;第5节 半_并行FIR滤波器&lt;br&gt;第5节 使用...

    HTML、CSS基础知识(网页设计必备50页)

    * 格式化：&lt;pre&gt;内容&lt;/pre&gt;, 让书写的文字格式化 * 引用文本：&lt;blockquote&gt;内容&lt;/blockquote&gt;, 属性名称：cite, 属性值：url 4. 排列清单控制标记 * 一般列表 * 编号列表 * 加着重号列表 * 定义列表 * 嵌套列表

    给网站美工的HTML word文档

    此外，&lt;head&gt;和&lt;/head&gt;之间必须包含&lt;Title&gt;标签，&lt;tr&gt;和&lt;td&gt;必须位于&lt;table&gt;标签内，而&lt;button&gt;则需在&lt;form&gt;内部定义，以确保 Netscape 等旧版浏览器的支持。 在编写HTML时，缩进规则也很重要。例如，在&lt;table&gt;元素...

Magicbox
Global site tag (gtag.js) - Google Analytics