如何解决＜a＞标签点击后hover事件失效的问题?

改变a标签css属性的排列顺序，只需要记住LoVe HAte原则就可以了：

link→visited→hover→active

比如下面错误的代码顺序：

a:hover {
  color: green;
  text-decoration: none;
}

a:visited { /* visited在hover后面，这样的话hover事件就失效了 */
  color: red;
  text-decoration: none;
}

正确的做法是将两个事件的位置调整一下。

注意⚠️各个阶段的含义：

a:link

未访问时的样式，一般省略成a

a:visited

已经访问后的样式

a:hover

鼠标移上去时的样式

a:active

鼠标按下时的样式