起因：

??????a與a:link的CSS代碼處，忽覺茫茫然不知所以然：這a的CSS和a:link什么關系？貌似有些沖突啊？還有這a:link、 a:visited、a:hover、a:active偽類之間有沒有相互制約和繼承關系？

過程：

??????使用軟件：Adobe Dreamweaver CS3 ，Internet Explorer8.0

須知：

?????? ①

在所有瀏覽器中，鏈接的默認外觀是：

• 未被訪問的鏈接帶有下劃線而且是藍色的
• 已被訪問的鏈接帶有下劃線而且是紫色的
• 活動鏈接帶有下劃線而且是紅色的

????? ②

在 CSS 定義中：
1. a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！
2. a:active 必須位于 a:hover 之后，這 樣才能生效！
于是得四者順序：
a:link----->a:visited------>a:hover-------->a:active。?
可以這樣記：LoVe HAte（愛恨）?[注意大寫字母]

結果：

???????在CSS中，

一、若存在a{……}的定義

①如果a:link{}也存在，那么不管a{}放到哪里，a{}和a:link{}沖突的屬性都會采用a:link{}的，不沖突的屬性若存在a{}中，會被a:link{}、 a:visited{} 、a:hover{} 、a:active{}都繼承；如果存在a:link{}中，只會被a:link{} 、a:hover{} 和a:active{}繼承，a:visited{}不繼承。
②如果沒寫a:link，只有其余三個，那么a:link會繼 承a{}的所有屬性，其余三個會保持自己的已有屬性并從a{}中繼承沒有的屬性。

③如果沒寫a:hover，只有其余三個，那么a:hover{}會繼承a:link{}中的所有屬性，并從a{}中繼承自己沒有的屬性；a:link{}會保持自己已有屬性并從a{} 中繼承沒有的屬性；a:active{}會保持自己已有屬性先從a:link{}中繼承沒有的屬性，再從a{}中繼承至此前還沒有的屬 性；a:visited{}會保持自己已有屬性并直接從a{}中繼承沒有的屬性。

④如果沒寫a:active{}，只有其余三個，那么a:active{}會繼承a:hover{}的所有屬性，之后上溯到a:link{}中繼承至此之前?自己還沒有的屬性，再從a{}中繼承自己至此仍沒有的屬性；a:hover{}會保持自己已有屬性先從a:link{}中繼承自己沒有 的屬性，再從a{}中繼承至此仍沒有的屬性；a:visited{}會直接從a{}中繼承自己沒有的屬性。

⑤如果沒寫a:visited{}，只有其余三個，那么a:visited{}會繼承a{}的所有屬性。其余三個都是保持自己已有屬性先從上一級（分級看上面的須知②，其中 a:link的上級是a）中繼承沒有的屬性，再從a{}中繼承至此自己沒有的屬性。

二、若沒有a{……}的定義

①如果沒寫a:link{}，a:link{}將采用默認的字體大小（無）和顏色（藍色）
②如果沒寫a:hover{}，a:hover{}將繼承a:link{}的所有屬性。如果有a:hover{}，它將從a:link{}中繼承自己沒有的屬性。
③如果沒寫a:active{}，a:active{}將先繼承a:hover{}中 的所有屬性，然后從a:link{}中繼承至此仍沒有的屬性。
④如果沒寫a:visited{}，a:visited{}將采用默認的字體大小（無）和顏色（紫色）。?

綜上所述，效果圖如下：

?

以前用CSS一直沒有遇到過這個問題，在最近給一個本科同學做的項目里面。出現一些問題，搜索引擎查了一些網站和資料，發現很多人問到這個問題，給出的結果我試了試，大部分都不正確。?
給出我試的順序，可能會對大家有一些幫助：?

復制代碼 代碼如下:

?

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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;?
}?

今天看到一位匿名朋友的問題，又去查了一些資料，這個人講的非常透徹：引自靈眸●第一爐沉香博客?
a :link、a:hover、a:visited這幾個元素，定義CSS時候的順序不同，也會直接導致鏈接顯示的效果不同。?
我想，原因就在于瀏覽器解釋CSS時遵循的“就近原則”。?

舉例來說：?
我想讓未訪問鏈接顏色為藍色，活動鏈接為綠色，已訪問鏈接為紅色：?
第一種情況：我定義的順序是a:visited、a:hover、a:link，這時會發現：把鼠標放到未訪問過的藍色鏈接上時，它并不變成綠色，只有放在已訪問的紅色鏈接上，鏈接才會變綠。?
第二種情況：我把CSS定義順序調整為：a:link、a:visited、a:hover，這時，無論你鼠標經過的鏈接有沒有被訪問過，它都會變成綠色啦。?

這是因為，一個鼠標經過的未訪問鏈接同時擁有a:link、a:hover兩種屬性，在第一種情況下，a:link離它最近，所以它優先滿足a:link，而放棄a:hover的重復定義。?
在第二種情況，無論鏈接有沒有被訪問過，它首先要檢查是否符合a:hover的標準（即是否有鼠標經過它），滿足，則變成綠色，不滿足，則繼續向上查找，一直找到滿足條件的定義為止。?
一句話：在CSS中，如果對于相同元素有針對不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。?
這樣，瀏覽器在顯示元素時，才會從特殊到一般、逐級向上驗證條件，才會使你的每一個CSS語句都起到效果。?
當然，如果故意打亂順序，也會造成一些特殊的效果。比如，可以為鏈接制造出下劃線顏色與文字顏色的差異。?
近日突然發現，原來這個CSS問題早已有高人提出啦。還是個老外呢。他給總結了一個便于記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。?
再重復一遍正確的順序：a:link、a:visited、a:hover、a:active .?

最后經驗補充：?
1.鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；?
2.鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；?
所以說，a:hover定義一定要放在a:link、a:visited的后面，，，

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的a与a:link、a:visited、a:hover、a:active的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。