CSS中定義a:link、a:visited、a:hover、a:active順序

以前用CSS一直沒(méi)有遇到過(guò)這個(gè)問(wèn)題，在最近給一個(gè)本科同學(xué)做的項(xiàng)目里面。出現(xiàn)一些問(wèn)題，搜索引擎查了一些網(wǎng)站和資料，發(fā)現(xiàn)很多人問(wèn)到這個(gè)問(wèn)題，給出的結(jié)果我試了試，大部分都不正確。

給出我試的順序，可能會(huì)對(duì)大家有一些幫助：

A:link {
 color: #000000;
 TEXT-DECORATION: none
}
A:visited {
 COLOR: #000000;
 TEXT-DECORATION: none
}
A:hover {
 COLOR: #ff7f24;
 text-decoration: underline;
}
A:active {
 COLOR: #ff7f24;  
 text-decoration: underline;
}

今天看到一位匿名朋友的問(wèn)題，又去查了一些資料，這個(gè)人講的非常透徹：引自靈眸●第一爐沉香博客

a :link、a:hover、a:visited這幾個(gè)元素，定義CSS時(shí)候的順序不同，也會(huì)直接導(dǎo)致鏈接顯示的效果不同。
我想，原因就在于瀏覽器解釋CSS時(shí)遵循的“就近原則”。

舉例來(lái)說(shuō)：
我想讓未訪問(wèn)鏈接顏色為藍(lán)色，活動(dòng)鏈接為綠色，已訪問(wèn)鏈接為紅色：
第一種情況：我定義的順序是a:visited、a:hover、a:link，這時(shí)會(huì)發(fā)現(xiàn)：把鼠標(biāo)放到未訪問(wèn)過(guò)的藍(lán)色鏈接上時(shí)，它并不變成綠色，只有放在已訪問(wèn)的紅色鏈接上，鏈接才會(huì)變綠。
第二種情況：我把CSS定義順序調(diào)整為：a:link、a:visited、a:hover，這時(shí)，無(wú)論你鼠標(biāo)經(jīng)過(guò)的鏈接有沒(méi)有被訪問(wèn)過(guò)，它都會(huì)變成綠色啦。

這是因?yàn)?，一個(gè)鼠標(biāo)經(jīng)過(guò)的未訪問(wèn)鏈接同時(shí)擁有a:link、a:hover兩種屬性，在第一種情況下，a:link離它最近，所以它優(yōu)先滿足a:link，而放棄a:hover的重復(fù)定義。
在第二種情況，無(wú)論鏈接有沒(méi)有被訪問(wèn)過(guò)，它首先要檢查是否符合a:hover的標(biāo)準(zhǔn)（即是否有鼠標(biāo)經(jīng)過(guò)它），滿足，則變成綠色，不滿足，則繼續(xù)向上查找，一直找到滿足條件的定義為止。

一句話：在CSS中，如果對(duì)于相同元素有針對(duì)不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。
這樣，瀏覽器在顯示元素時(shí)，才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件，才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果。
當(dāng)然，如果故意打亂順序，也會(huì)造成一些特殊的效果。比如，可以為鏈接制造出下劃線顏色與文字顏色的差異。

近日突然發(fā)現(xiàn)，原來(lái)這個(gè)CSS問(wèn)題早已有高人提出啦。還是個(gè)老外呢。他給總結(jié)了一個(gè)便于記憶的“愛(ài)恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。
再重復(fù)一遍正確的順序：a:link、a:visited、a:hover、a:active .

最后經(jīng)驗(yàn)補(bǔ)充：

1.鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)擁有a:link、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義；

2.鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)擁有a:visited、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義；

所以說(shuō)，a:hover定義一定要放在a:link、a:visited的后面，，，