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

結語