今天在學(xué)習(xí)用背景圖設(shè)計項目符號的時候，發(fā)現(xiàn)了在 a:visited 偽類選擇器里對設(shè)置的下劃線(text-decoration:underline)和背景圖(background:)都不起作用，僅僅對顏色（color）屬性有效，很是糾結(jié)。
------------------------------------------------------------------------------------
更新于2017/9/24。有關(guān)a:visited 有關(guān)偽類選擇器的color 屬性補(bǔ)充。
再做網(wǎng)頁小導(dǎo)航條的時候無意間發(fā)現(xiàn)了，這個問題在不同瀏覽器的區(qū)別，于是前來于此做一下筆記，一遍日后參考，話不多說，就拿我今天寫的導(dǎo)航條為例吧具體如下（完整的代碼我就不寫了，只把有關(guān)此內(nèi)容的核心代碼貼出來吧）：
.test a:link {
color:#666;/*我們把這個顏色稱為 淺灰 吧*/
text-decoration:none;
}
.test a:visited {
color:#f00;/*我們把這個顏色稱為 橘紅 吧*/
text-decoration:underline;/*下劃線肯定是無效的*/
}
IE瀏覽器中的效果圖（我只點擊了-博客-這個鏈接）：
很明顯上面的代碼得到了，點擊-博客-后，字體顏色如愿以償?shù)?由 淺灰 變?yōu)?橘紅 ，很好的體現(xiàn)在IE瀏覽器中。
我們再來看一下在 谷歌和火狐 瀏覽器中的效果：
在 谷歌和火狐 瀏覽器中，點擊-博客-后，所有超鏈接的字體顏色都的 由 淺灰 變?yōu)?橘紅 ，不難想象這也是出于網(wǎng)絡(luò)安全的考慮（不懂，請繼續(xù)往下看。），我們在實際應(yīng)用中記住這些差異即可（其他瀏覽器為測試，建議閱讀者可自行測試）。
------------------------------------------------------------------------------------
代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用背景圖設(shè)計項目符號</title>
<style type="text/css">
ul{
list-style:none;
width:20em;
padding:0;
border-bottom:1px dashed #aaa;
}
li{
border-top:1px dashed #aaa;
margin:0;
padding:0.5em;
}
li a{
display:block;
padding-left:1.5em;
text-decoration:none;
}
li a:link{
background:url(images/arrow3.gif) no-repeat center right;
}
li a:visited{
text-decoration:underline;
background:url(images/arrow4.gif) no-repeat center right;
}
li a:hover{
background:url(images/arrow4.gif) no-repeat center left;
}
</style>
</head>
<body>
<h1>新聞</h1>
<ul>
<li><a href="#">軍事</a></li>
<li><a href="#">財經(jīng)</a></li>
<li><a href="#">體育</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">科技</a></li>
</ul>
</body>
</html>
ie、谷歌等瀏覽器效果：
可以看出訪問后的并沒有出現(xiàn)下劃線和背景圖。經(jīng)查閱資料終于解決了我的疑惑。
資料：
Why the :visited Pseudo-class is Strange
Modern browsers have severely restrained the CSS properties that developers can use in a style rule that uses the :visited link pseudo-class. If you’re unfamiliar with this oddball pseudo-class, you may be wondering why your site’s visited links aren’t rendering as expected.
If you try to style visited links by giving them a background-image, for instance, you’ll be surprised that you can no longer do so in modern browsers. You might think it’s a browser bug because there’s no immediately obvious reason why the following CSS doesn’t work:
/* this will not work as expected */
a:visited {
display: block;
background-image: url("cat.jpg");
}
If we use any other pseudo-class — like, say, the :hover pseudo-class — the style properties work as expected.
/* this is perfectly fine */
a:hover {
display: block;
background-image: url("cat.jpg");
}
Currently, it seems like the only property you can assign to the :visited pseudo-class is the color property. Oh, and the browser in all likelihood won’t render the color with an alpha transparency even if you correctly specify it with a standard color unit like rgba.
Strange right? What’s up?
The W3C specifications for the link pseudo-classes technically gives web browsers the option to ignore our :link and :visited pseudo-class style rules. This is because the :visited pseudo-class can be potentially abused in such a way that an abuser can get data about its visitors’ browsing history.
It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently."
Source: Selectors Level 3: The link pseudo-classes: :link and :visited
(In case you’re wondering: In the above excerpt, the term "UAs" refers to "user agents", which is software that’s used to access a website. The most common type of UA is a web browser.)
How a User’s Browsing History Could Be Compromised
To explain the reason why you can’t use all CSS properties with the :visited pseudo-class, I will attempt to explain it through a hypothetical situation.
Modern browsers no longer allow the background-image property to render.
省略......
翻譯（英語不好實在看不下去了，只翻譯了上面這部分）：
為什么：訪問偽類是奇怪的？
現(xiàn)代瀏覽器嚴(yán)重限制了開發(fā)人員可以在樣式規(guī)則中使用的CSS屬性，該樣式規(guī)則使用：訪問鏈接偽類。如果你不熟悉這個古怪的偽類，你可能想知道為什么你的網(wǎng)站的訪問過的鏈接沒有呈現(xiàn)預(yù)期。
如果你試著通過給他們一個背景圖像來設(shè)計訪問的鏈接，你會驚訝于你不再能在現(xiàn)代瀏覽器中這樣做了。你可能認(rèn)為這是一個瀏覽器錯誤，因為沒有明顯的理由說明下面的CSS不起作用：
/ *這將不象預(yù)期的那樣工作。*/
a:visited {
display: block;
background-image: url("cat.jpg");
}
如果我們使用其他任何偽類，比如：懸停偽類，樣式屬性就如預(yù)期的那樣工作。
/*這是完全正確的*/。
a:hover {
display: block;
background-image: url("cat.jpg");
}
目前，它似乎是惟一可以賦予的屬性：訪問的偽類是顏色屬性。哦，在所有可能的瀏覽器不會呈現(xiàn)顏色的alpha透明度即使你正確地指定它與標(biāo)準(zhǔn)顏色單元如RGBA。
陌生嗎？出什么事了？
W3C規(guī)范的鏈接偽類在技術(shù)上提供了Web瀏覽器忽略我們的選項:link 和 :visited偽類樣式規(guī)則。這是因為：:visited偽類可以潛在的濫用使得網(wǎng)絡(luò)施虐者可以獲得訪問者的瀏覽歷史記錄的數(shù)據(jù)。
樣式表作者可能會濫用：鏈接和訪問的偽類，以確定用戶在未經(jīng)用戶同意的情況下訪問了哪些站點。
瀏覽器可能會把所有鏈接中未訪問的鏈接，或采取其他措施來保護(hù)用戶的隱私而渲染訪問和未訪問的鏈接是不同的。”
用戶的瀏覽歷史如何被破壞
為了解釋為什么不能將所有CSS屬性用于:visited，我將嘗試通過假設(shè)的情況來解釋它。
現(xiàn)代瀏覽器不再允許背景圖像屬性渲染。
總結(jié)：
a:visited偽類可能會暴露用戶瀏覽信息記錄，攻擊者可能會據(jù)此判斷用戶曾經(jīng)訪問過的網(wǎng)站，造成不必要的損失，因此這些瀏覽器決定限制a:visited的功能，所以不是代碼的問題，而是瀏覽器方面的限制。
所以，若是用下劃線或背景圖來判斷某鏈接是否曾被點擊過是失效的，那么我們就只能通過設(shè)置顏色來區(qū)別了，這時候我們就要嚴(yán)格遵從lvha規(guī)則了（但在寫小demo學(xué)習(xí)時又會發(fā)現(xiàn)有時候頁面在經(jīng)過改動后刷新會自動顯示鏈接的顏色為：visited設(shè)置中的顏色，這是因為瀏覽器緩存的原因，在做小demo時可采用頭部meta編碼使其不再保留緩存）。
附：但書寫時也要注意link--visited--hover-active順序不能顛倒。
老外總結(jié)了一個便于記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。定義ａ鏈接樣式的正確順序：a:link、a:visited、a:hover、a:active。
聲明：此文只代表個人見解，只供參考！聯(lián)系QQ：1522025433
