今天在學(xué)習(xí)用背景圖設(shè)計(jì)項(xiàng)目符號的時(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)航條的時(shí)候無意間發(fā)現(xiàn)了合蔽，這個(gè)問題在不同瀏覽器的區(qū)別，于是前來于此做一下筆記介返，一遍日后參考拴事，話不多說沃斤，就拿我今天寫的導(dǎo)航條為例吧具體如下（完整的代碼我就不寫了，只把有關(guān)此內(nèi)容的核心代碼貼出來吧）：
.test a:link {
color:#666;/*我們把這個(gè)顏色稱為 淺灰 吧*/
text-decoration:none;
}
.test a:visited {
color:#f00;/*我們把這個(gè)顏色稱為 橘紅 吧*/
text-decoration:underline;/*下劃線肯定是無效的*/
}
IE瀏覽器中的效果圖（我只點(diǎn)擊了-博客-這個(gè)鏈接）：
很明顯上面的代碼得到了刃宵，點(diǎn)擊-博客-后衡瓶，字體顏色如愿以償?shù)?由 淺灰 變?yōu)?橘紅 ，很好的體現(xiàn)在IE瀏覽器中牲证。
我們再來看一下在 谷歌和火狐 瀏覽器中的效果：
在 谷歌和火狐 瀏覽器中坦袍，點(diǎn)擊-博客-后十厢，所有超鏈接的字體顏色都的 由 淺灰 變?yōu)?橘紅 ，不難想象這也是出于網(wǎng)絡(luò)安全的考慮（不懂捂齐，請繼續(xù)往下看蛮放。），我們在實(shí)際應(yīng)用中記住這些差異即可（其他瀏覽器為測試辛燥，建議閱讀者可自行測試）筛武。
------------------------------------------------------------------------------------
代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用背景圖設(shè)計(jì)項(xiàng)目符號</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="#">財(cái)經(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.
省略......
翻譯（英語不好實(shí)在看不下去了榴都，只翻譯了上面這部分）：
為什么：訪問偽類是奇怪的待锈？
現(xiàn)代瀏覽器嚴(yán)重限制了開發(fā)人員可以在樣式規(guī)則中使用的CSS屬性，該樣式規(guī)則使用：訪問鏈接偽類嘴高。如果你不熟悉這個(gè)古怪的偽類竿音，你可能想知道為什么你的網(wǎng)站的訪問過的鏈接沒有呈現(xiàn)預(yù)期。
如果你試著通過給他們一個(gè)背景圖像來設(shè)計(jì)訪問的鏈接拴驮，你會驚訝于你不再能在現(xiàn)代瀏覽器中這樣做了春瞬。你可能認(rèn)為這是一個(gè)瀏覽器錯(cuò)誤，因?yà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瀏覽器忽略我們的選項(xiàng):link 和 :visited偽類樣式規(guī)則序目。這是因?yàn)椋?visited偽類可以潛在的濫用使得網(wǎng)絡(luò)施虐者可以獲得訪問者的瀏覽歷史記錄的數(shù)據(jù)。
樣式表作者可能會濫用：鏈接和訪問的偽類唆樊，以確定用戶在未經(jīng)用戶同意的情況下訪問了哪些站點(diǎn)宛琅。
瀏覽器可能會把所有鏈接中未訪問的鏈接，或采取其他措施來保護(hù)用戶的隱私而渲染訪問和未訪問的鏈接是不同的逗旁『俦伲”
用戶的瀏覽歷史如何被破壞
為了解釋為什么不能將所有CSS屬性用于:visited，我將嘗試通過假設(shè)的情況來解釋它片效。
現(xiàn)代瀏覽器不再允許背景圖像屬性渲染红伦。
總結(jié)：
a:visited偽類可能會暴露用戶瀏覽信息記錄，攻擊者可能會據(jù)此判斷用戶曾經(jīng)訪問過的網(wǎng)站淀衣，造成不必要的損失昙读，因此這些瀏覽器決定限制a:visited的功能，所以不是代碼的問題膨桥，而是瀏覽器方面的限制蛮浑。
所以，若是用下劃線或背景圖來判斷某鏈接是否曾被點(diǎn)擊過是失效的只嚣，那么我們就只能通過設(shè)置顏色來區(qū)別了沮稚，這時(shí)候我們就要嚴(yán)格遵從lvha規(guī)則了（但在寫小demo學(xué)習(xí)時(shí)又會發(fā)現(xiàn)有時(shí)候頁面在經(jīng)過改動后刷新會自動顯示鏈接的顏色為：visited設(shè)置中的顏色，這是因?yàn)闉g覽器緩存的原因册舞，在做小demo時(shí)可采用頭部meta編碼使其不再保留緩存）蕴掏。
附：但書寫時(shí)也要注意link--visited--hover-active順序不能顛倒。
老外總結(jié)了一個(gè)便于記憶的“愛恨原則”（LoVe/HAte）调鲸，即四種偽類的首字母:LVHA盛杰。定義ａ鏈接樣式的正確順序：a:link、a:visited藐石、a:hover即供、a:active。
聲明：此文只代表個(gè)人見解于微，只供參考募狂！聯(lián)系QQ：1522025433
