重温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>

链接1点击后visited生效，链接2无论怎么点击visited都不生效；

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！