昨天想使用 a:visited 改變右側“猜你喜歡”已訪問過的文字顏色，發現改來改去效果都一般，想到還有其他幾個CSS可以設置，與顏色相關的，結果，太久沒使用這個偽類選擇器，具體那幾個支持的CSS一下子記不得了，發現有必要自己整理記錄下。

一、由愛生恨

鏈接4偽類（后兩個偽類后來拖拽到幾乎所有HTML標簽元素）如果同時使用，其順序是這樣的： :link → :visited → :hover → :active 。

首字母連起來是LVHA，順序完全符合love-hate，也就是愛恨，所謂由愛生恨，這樣順序就記住了。

目前這個年代， :link 這個偽類用得已經不多了，但作用還是有的，我們平時用得比較多的都是直接設置 <a> 元素的顏色，例如：

a { color: blue; }

實際上，下面這種要更合適，更規范：

a:link { color: blue; }

兩者有什么區別呢？

區別在下面，下面兩個 <a> 元素，前者可以匹配 a:link 選擇器，但后者卻只能匹配 a 選擇器：

例如我很喜歡移除 href 屬性表示 <a> 元素按鈕的禁用態，使用 a:link 禁用和非禁用的CSS就更好控制了。

只是我們使用 a:link 選擇器的時候， a:visited 選擇器也一定要設置（因為 a:link 在最前面），不然訪問過的鏈接顏色就會跟著系統或者當前元素設置的 color 走，表現反而有些亂，因此，當下已經很少見到使用 :link 偽類選擇器的了。

而 :visited 偽類選擇器依然很有用，尤其在列表式鏈接站點，例如文章列表，章節列表，可以讓用戶知道這篇文章我已經看過了，算是比較友好的一種體驗處理。

二、:visited偽類選擇器支持CSS很有限

或許是出于安全考慮， :visited 偽類選擇器支持CSS很有限，目前僅支持下面這些CSS： color ， background-color ， border-color ， border-bottom-color ， border-left-color ， border-right-color ， border-top-color ， column-rule-color 以及 outline-color 。

同時，類似 ::before ， ::after 這些偽元素都不支持，例如，我們希望使用文字標示已經訪問過的鏈接，如下：

a:visited::after{content:'visited';}  // 注意，不支持

不好意思，想法雖好，但沒有任何瀏覽器支持，請死了這條心。