超链接a标签中的伪类区别及用法

首先 “超链接” 就是我们 html 中的 a 标签，这个应该大家都没问题。

1. 再接着，"伪类"：什么是伪类？
2. css 对于伪类的解释是用于向某些选择器添加特殊的效果。
4. 简单点说，就是你没定义这个类，但它确实作为一个类来使用。
5. 再简单点就是你可以利用伪类为我们的元素添加各种不同的效果。
7. 比如：
8. a:hover { }
9. 这段代码就是给 a 这个标签选择器添加了一个效果，这个效果在鼠标悬停于 a 标签上方时被触发。
10. 并且，伪类还有权重（特殊性），《css权威指南》中指出，其特殊性为：0,0,1,0
11. 也就是说伪类的权重和class的权重是一样的。这一点一定要注意，这一点一定要注意 一定要注意；敲黑板划重点！
13. 再回到问题，css1 在给 a 定义伪类的时候，一共有四个伪类，分别是：link,visited,hover,active。并且这四个伪类一直延续到现在
14. 其各自代表不同的意思：
15. a:link 表示未被访问的链接 （在页面上写了，还没有访问过）
16. a:visited 表示已经被访问过后的链接 （访问过了，注：判断是否访问过，是以浏览器的浏览记录为依据）
17. a:hover 表示鼠标指针位于其上的链接
18. a:active 表示活动链接 （当鼠标点下时的链接）
20. 用中文表达就是：你在页面上写了一个链接，你打开这个页面的时候，这个链接处于 link 状态
21. 当你要去点击它的时候，首先会把鼠标移到连接上去，这时候是 hover 状态
22. 当你把鼠标点下去，还没抬起来的那一瞬间是 active 状态
23. 完事之后就是 visited 状态了
25. 看到这大家应该就要明白题中的 L,V,H,A 四个字母分别代表的就是 a 标签的四个伪类了。
27. 考题第二点：顺序？
28. a 标签的四个伪类书写顺序很重要么？当然重要！！！
29. 《CSS设计指南》说到四个伪类的书写顺序一定要正确，否则浏览器可能不会显示预期的结果。
31. 首先来看前面两个伪类：link visited 分别代表未访问的链接和已经访问的链接，那么一个链接不可能同时存在这两个状态，所以实际上这两个伪类的顺序是可以随意一点的
33. 再来看 visited 和 hover
34. 假设 hover 写在 visited 的前面 并且这个链接已经被访问过了
35. a:visited，a:hover 这两个选择器在权重上是一样的。那么根据 css 规则，权重一样的两个选择器选中同一个元素的时候,后者覆盖前者，所以 visited 一定要在前面。那么以此类推，link 和 hover 之间的顺序也就毋庸置疑了
37. 再来看 hover 和 active
38. 试想当我们要点击一个元素的时候，是不是一定会移动到这个元素身上？
39. 也就是说想要触发 active 必定会触发 hover 伪类,还是权重一样，后者覆盖前者
41. 那么四个元素的顺序就出来了 前面 link visited 后面 hover 和 active
43. 假设 hover 写在 visited 的前面 并且这个链接已经被访问过了，那么这时候鼠标移动到 a 标签身上，触发 hover,其颜色变成粉色（假设）。但是不要忘了，后面还有一个 visited 并且 a:visited，a:hover 这两个选择器在权重上是一样的。那么根据 css 规则，权重一样的两个选择器选中同一个元素的时候，书写在后面的选择器会覆盖前面的效果。所以这时候 hover 的样式会被 visited 覆盖。其导致的结果就是：当一个链接被访问过后，鼠标移动到这个链接身上将不会有任何的效果（表现为 hover 失效了）。那么以此类推，link 和 hover 之间的顺序也就毋庸置疑了
45. 再来看 hover 和 active
46. 试想当我们要点击一个元素的时候，是不是一定会移动到这个元素身上？也就是说必定会触发 hover 伪类
47. 这时候如果 active 伪类写在 hover 伪类前面 在点击这个元素的时候，样式发生改变了，但是后面的 hover 权重和它一样高，又被覆盖了，所以这两个伪类之间的顺序也就很明显了 先写 hover 后写active
49. 那么四个元素的顺序就出来了 前面 link visited 后面 hover 和 active
51. 最后再多嘴一句，既然 link 和 visited 的顺序无所谓，那为什么一般都要把 link 放在前面呢？
52. 一个链接，页面一上来其状态一定是未访问。从视觉顺序来排，link 在前面。）
54. 教大家一个小技巧：Lv!(路易威登，一个世界知名奢侈品品牌，女孩对其防御力为负无穷大！俗称泡妞利器)
55. lv! haha...（如果你送女朋友一个lv，那她一定开心得哈哈大笑）