談一談a:link、a:visited、a:hover、a:active的正確使用順序


前端路上,未來還遠,所以基礎部分必須扎實,走好現在腳下的每一步才是現在最重要的。

下面進入正題吧。

 

1. <a>標簽

我們先說一說<a>標簽是干啥用的。

<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。

在所有瀏覽器中,鏈接的默認外觀是:

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

<a>標簽還有一個很重要的屬性:target,它用於規定在何處打開鏈接文檔,取值有:_blank;_parent;_self;_top。這個我后面也會小小地總結一下。

 

2. a鏈接的四種狀態

偽類是CSS 用於向某些選擇器添加特殊的效果。

a標簽中有四個:link、visited、hover、active

(1)link

說明:設置a對象在未被訪問前的樣式表屬性。

(2)visited

說明:設置a對象在其鏈接地址已被訪問過時的樣式表屬性。

(3)hover

說明:設置對象在其鼠標懸停時的樣式表屬性。

(4)active

說明:設置對象在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式表屬性。

定義CSS時候的順序不同,也會直接導致鏈接顯示的效果不同。原因可能在於瀏覽器解釋CSS時遵循的“就近原則”。正確的順序:a:link、a:visited、a:hover、a:active

解釋:

  • link:連接平常的狀態 
  • visited:連接被訪問過之后 
  • hover:鼠標放到連接上的時候
  • active:連接被按下的時候 

舉例來說:

我想讓未訪問鏈接顏色為藍色,活動鏈接為綠色,已訪問鏈接為紅色:

第一種情況:我定義的順序是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 .

 

最后經驗補充:

css的樣式覆蓋特性導致其必須按照特定順序去寫。

1.鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;

2.鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;

所以說,a:hover定義一定要放在a:link、a:visited的后面!

.

 

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM