a:link,a:visited,a:hover,a:active,visitedhover

來源:互聯網
上載者:User

a:link,a:visited,a:hover,a:active,visitedhover

1:解釋

link:串連平常的狀態

visited:串連被訪問過之後

hover:滑鼠放到串連上的時候

active:串連被按下的時候 
   
  
詳細的: 
:hover版本:CSS1/CSS2  相容性:IE4+ NS4+ 
文法: 
Selector : hover { sRules } 
說明: 
設定對象在其滑鼠移至上方時的樣式表屬性。 
在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。 
目前IE5.5+僅支援CSS1中的:hover。 

:active版本:CSS1/CSS2  相容性:IE4+ 
文法: 
Selector : active { sRules } 
說明: 
設定對象在被使用者啟用(在滑鼠點擊與釋放之間發生的事件)時的樣式表屬性。 
在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。並且:active狀態可以和:link以及:visited狀態同時發生。 
目前IE5.5+僅支援CSS1中的:active。 

:link版本:CSS1  相容性:IE4+ NS4+ 
文法: 
Selector : link { sRules } 
說明: 
設定a對象在未被訪問前的樣式表屬性。 
IE3將:link偽類的樣式表屬性作用於visited偽類。 
預設值由瀏覽器決定。 
對於無href屬性(特性)的a對象,此偽類不發生作用。 

:visited版本:CSS1  相容性:IE4+ NS4+ 
文法: 
Selector : visited { sRules } 
說明: 
設定a對象在其連結地址已被訪問過時的樣式表屬性。 
IE3將:link偽類的樣式表屬性作用於visited偽類。 
預設值由瀏覽器決定。定義網頁到期時間或使用者清空記錄將影響此偽類的作用。 
對於無href屬性(特性)的a對象,此偽類不發生作用。
2:hover和a:visited書寫順序的重要性
今天在用a:hover屬性的時候發現一個奇怪的問題,同一個頁面裡面有些連結的a:hover效果不能正常表現出來。連結的代碼是一樣,沒有使用其它樣式固定,搞的我莫名其妙。還以為是某個標籤沒有關閉,但是頁面比較長,檢查起來又嫌累,但是想來想去找不到其它原因,索性把瀏覽器一關,做別的事情去了。
重新開啟這個頁面的時候,突然發現那個連結的a:hover效果又出來了。我想了一下,點了那個連結,然後回過頭再點,果然又沒了。連忙檢查css文檔,發現a:hover屬性寫在了visited之前,改寫到之後,重試,ok!
以前看書的時候注意到css中關於連結資料表現的書寫有提示說各屬性順序不能顛倒,一直沒有注意,寫的時候通常都很隨意。現在看來不能這個順序還是很重要的。
css中關於超連結的四個屬性一般正常順序為:link,visited,hover,active,即

a:link 
a:visited 
a:hover
a:active

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的後面,,,

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.