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

一、由愛生恨

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

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

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

a { color: blue; }

實際上，下面這種要更合適，更規(guī)范：

a:link { color: blue; }

兩者有什么區(qū)別呢？

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

<a href="##">文字</a>
<a>文字2</a>

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

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

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

二、: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 這些偽元素都不支持，例如，我們希望使用文字標示已經(jīng)訪問過的鏈接，如下：

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

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

不過好在 :visited 偽類支持子選擇器，不過，所能控制的CSS屬性和 :visited 一模一樣，就那幾個和顏色相關(guān)的CSS屬性，也不支持 ::before ， ::after 這些偽元素。

例如：

a:visited span{color: red;}
<a href="">文字<span>visited</span></a>

如果鏈接是瀏覽器訪問過的，則 <span> 元素文字顏色就會直紅色，如下截圖示意：

于是，我們就可以下面這種方法實現(xiàn)訪問過的鏈接文字后面跟一個visited字樣。HTML如下：

<a href="">文字<small></small></a>

CSS如下：

small { position: absolute; color: white; } // 這里設(shè)置color: transparent無效
small::after { content: 'visited'; }
a:visited small { color: purple; }

除了支持的CSS有限，:visited偽類選擇器還有不少其他奇怪的特性。

三、沒有半透明

使用 :visited 偽類選擇器控制顏色的時候，雖然語法上支持半透明色，但是表現(xiàn)上，要么純色，要么全透明。

例如：

a { color: blue; }
a:visited { color: rgba(255,0,0,.5); }

結(jié)果不是半透明紅色，而是純紅色，完全不透明。

四、只能重置，不能憑空設(shè)置

請問下面這段CSS，訪問過的 <a> 元素會有背景色嗎？

a { color: blue; }
a:visited { color: red; background-color: gray; }

HTML為：

<a href="">有背景色嗎？</a>

答案是不會有背景色，如下截圖：

因為 :visited 偽類選擇器中的色值只能重置，不能憑空設(shè)置。

我們修改成下面這樣就可以了：

a { color: blue; background-color: white; }
a:visited { color: red; background-color: gray; }

此時，文字效果如下截圖：

也就是默認需要有一個背景色，這樣 :visited 的時候才有有背景色呈現(xiàn)

五、:visited設(shè)置并呈現(xiàn)的色值無法獲取

也就是說，當文字顏色值表現(xiàn)為 :visited 選擇器設(shè)置的顏色值的時候，我們使用JS的getComputedStyle()是獲取不到這個顏色值的。

已知CSS如下：

a { color: blue; }
a:visited { color: red; }

并且我們的鏈接表現(xiàn)為紅色，此時我們運行下面的JavaScript代碼：

window.getComputedStyle(document.links[0]).color;

結(jié)果輸出的是： "rgb(0, 0, 255)" ，也就是藍色blue對應(yīng)的RGB色值。

如下截圖示意：

六、回憶完畢

總之， :visited 偽類選擇器是一個有很多“怪癖”的選擇器，如果按照 :hover 或者 :active 這類選擇器的表現(xiàn)理解之，一定會不知所然，因為太多特性不支持，太多表現(xiàn)不合常規(guī)理解。

究其原因，我猜100%是出于安全考慮，如果瀏覽器可以通過JS或者其他行為表現(xiàn)知道你已經(jīng)訪問過哪些鏈接，我靠，那隱私直接就暴露了呀，肯定是不行的，所以，如果你想借助 :visited 偽類選擇器搞些花頭，我勸大家還是死了這條心，老老實實搬磚吧。

另外， :visited 的怪異特性應(yīng)該還有其他一些，歡迎大家進行補充。

總結(jié)

以上所述是小編給大家介紹的CSS :visited偽類選擇器隱秘往事回憶錄，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論