
?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 ;
}
?
我想,原因就在于瀏覽器解釋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問題早已有高人提出啦。還是個老外呢。他給總結了一個便于記憶的“ 愛恨原則 ”( L o V e/ H A te),即四種偽類的首字母: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的后面,,,
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
