firefox 的 a:hover 問題【經驗】在CSS中定義a:link、a:visited、a:hover、a:active順序

來源:互聯網
上載者:User

這個是很簡單的東西,但在 firefox 下卻怎麼都不對.原因是a:hover 這樣的偽類定義混亂引起的. 最後我得出的 ie / firefox 通用的為

a:hover {..}

a{..}

不要再加其他偽類了,否則反而會出錯.

另有網友如是說

--------------------------------------------------

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html

【經驗】在CSS中定義a:link、a:visited、a:hover、a:active順序以前用CSS一直沒有遇到過這個問題,在最近給一個本科同學做的項目裡面。出現一些問題,搜尋引擎查了一些網站和資料,發現很多人問到這個問題,給出的結果我試了試,大部分都不正確。 給出我試的順序,可能會對大家有一些協助:代碼

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 Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.