前言
直到如今，前端一直都是我的弱项，想要总结自己前端都学了什么，可是真的想写的时候，却发现自己会的真的是好少。既然如此，就随性一点，想到哪里记到哪里吧。
首先，这四个选择器叫伪类选择器，一般用在a标签中的样式，如果想要四个一起用，首先需要考虑的是顺序问题（4×3×2×1=24种可能），正确的顺序有好几种，当初我的老师教我一种容易记住的排列方式，就是我标题这样的顺序，理由如下：
（小技巧：有一天我走在路上，捡到一个lv的包，我就很开心，笑haha。l在头，v在尾，ha依次在中间）
推荐大家用谷歌浏览器调试前端样式，因为谷歌浏览器很适合IT，至于其他浏览器（如IE6等）对于这四个伪类选择器的兼容问题，本文不讨论，到此，言归正传，老规矩，在代码中学习知识。
1、:link、:hover、:active和:visited的区别？
:link表示鼠标点击之前，也称为原始状态
:hover表示鼠标悬停状态
:active表示鼠标点击状态
:visited表示鼠标点击之后状态
<!DOCTYPE html><html lang="en"><head><meta http-equiv="content-type" content="text/html" charset="UTF-8"><title>isolated star学习四个伪类选择器</title><style type="text/css">/*点击之前*/a:link {background-color: red;}/*鼠标悬停状态*/a:hover {background-color: green;}/*点击状态*/a:active {background-color: blue;}/*点击之后状态*/a:visited {background-color: gray;}/*改变文字的默认颜色以及消除下划线*/a{color: white;text-decoration: none;}</style></head><body><!--伪类元素选择器(原始状态[:link];鼠标悬停状态[:hover];点击状态[:active];点击之后[:visited])--><a href="/" target="_blank">点击进入爱玛学院</a></body></html>
运行结果截图：
说明：背景颜色改变顺序如上图，为了消除视觉影响，这里把文字都统一成白色。
不过有一个最大的问题是，当你刷新页面，样式会停留在最后一张图片，当时我傻傻的以为这是因为visited不能和其余三个一起用，其实真相并非如此，这是浏览器的缓存机制，这里只需要清除一下缓存就可以了，如图：
2、总结
以上就是我对四个伪类选择器的理解，如有不对之处，希望诸君不吝赐教。
版权声明：本文出自孤星卟哭的博客，原创文章，转载请注明出处。 /zcy92949/article/details/80074839
