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

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

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章