重温CSS伪类，如何解决CSS的active伪类无效的问题

前言

在工作学习中，使用CSS伪类的情况还是很多的，今天就来重温一下，看看为什么有时候使用不好使。

CSS伪类

伪类用于定义元素的动态状态，例如悬停（hover）、点击（active）等，伪类的名称不区分大小写，但需要以冒号

:

开头。

/* 未访问的链接 */
        a:link {
        color: #FF0000;
        }

        /* 已访问的链接， 绿色 */
        a:visited {
        color: #00FF00; 
        }

        /* 鼠标悬停链接 */
        a:hover {
        color: #FF00FF;
        }

        /* 已选择的链接 */
        a:active {
        color: #0000FF;
        }
           

解决伪类无效

伪类使用顺序

使用伪类的时候，我们要注意一下伪类的顺序，

hover

必须被置于

link

和

visited

之后，才是有效的。

active

必须被置于

hover

之后，才是有效的。

如果将

visited

放到最后，则会导致，a:visited会覆盖:active和:hover的样式，无论鼠标悬停还是按下激活，链接都将保持为绿色。

因此，为方便记忆，可记为“LOVE HATE”；

伪类必须按照顺序定义，

link

;

visited

;

hover

;

active

，

visited

是与URL有关，而与单个的a标签无关

visited

按照定义来说，是指用户访问过某一个链接之后，该链接的a标签将呈现对应

visited

的样式。但在使用中发现，链接无效会使a的

visited

无效, 这是因为链接点击后没有产生网页访问的历史记录, 所以链接点击后无效;

例如：下面有两个链接，链接1是跳转到掘金的有效链接，链接2是空链接，无效链接；

<a rel="nofollow" href="https://juejin.cn/">链接1</a>
    <a rel="nofollow" href="javascript: void(0);">链接2</a>
           

结语