CSS考點之一，標籤，僞類

---

博主的博客地址：Stillwater的我的博客
轉載請註明原文連接

1、<a>標籤經常使用的僞類概述

a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

• link 當有連接，且該連接未被訪問過期，此僞類處於激活狀態。

• vistied 某個連接已經被訪問過期，此僞類處於激活狀態。

• hover 鼠標懸停在某個連接上時，此僞類處於激活狀態，直到鼠標移開連接。

• active 用鼠標點擊連接時，此僞類激活。注意，鼠標點擊後不鬆開，此僞類一直激活，直到鬆開鼠標。

2、<a>標籤僞類書寫順序詳解

爲何要考慮僞類的書寫順序？

  第一，CSS（Cascading Style Sheets）全稱翻譯爲層疊樣式表。有時候多條規則會定義元素的同一個屬性，這時該怎麼辦呢？CSS用層疊的原則來考慮樣式聲明，從而判斷相互衝突的規則中哪一個規則應該起做用。首先，你編寫的樣式若是與瀏覽器的默認樣式衝突，均以你編寫的樣式爲準。在此基礎上，CSS用層疊的原則來考慮特殊性（specificity）、順序（order）和重要性（importance），從而判斷相互衝突的規則中哪一個規則應該起做用。不要受這些術語的影響，你只要去試，就能明白CSS決定該應用哪些樣式以及什麼時候應用這些樣式的方式。¹
  第二，因爲<a>標籤的這四個僞類的特殊性是同樣的，因此當某個連接處於的狀態同時激活多個僞類時，那麼僞類的書寫順序就起到了關鍵做用，從而影響最終的顯示效果。這就是爲何咱們要考慮僞類的書寫順序。

哪些僞類會同時激活並影響顯示效果？

  第一，其實:link和:visited兩個僞類之間順序無所謂。由於它倆不可能同時觸發，即在未訪問的同時訪問過。此處注意，有人將:link理解成只要某元素有連接存在，就會激活，這是錯誤的。當連接被訪問過之後，:link就再也不激活。咱們作個試驗。

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

  咱們把:link放在最後，開始時連接未訪問，不管是我鼠標懸浮仍是點擊，顏色都不會改變，都是藍色。當我第一次點擊鼠標並鬆開後，顏色變成紅色。而後再懸浮就會變成綠色，再點擊，就會變成紫色，再鬆開就恢復成紅色。藍色不會再出現。此時連接依然存在，只是已經被訪問過，因此:link僞類再也不激活。
  第二，從用戶習慣角度考慮，不管連接訪問或未訪問過，都但願當鼠標懸浮在連接上時可以產生顏色變化，而且，不管連接訪問或未訪問過，產生的顏色變化應該是同樣的。因此應該把:hover放在:link和:visited後面

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

  第三，從用戶習慣角度考慮，不管連接訪問或未訪問過，都但願當鼠標點擊連接時可以產生顏色變化，而且，不管連接訪問或未訪問過，產生的顏色變化應該是同樣的。因此應該把:active放在:link和:visited後面

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

  第四，順序上，老是先將鼠標懸浮在連接上，而後纔可以進行點擊操做，預期效果是懸浮時產生顏色變化，點擊鼠標時產生另外一種顏色變化。若把hover放在active後面，當點擊連接一瞬，實際你在激活active狀態的同時觸發了hover僞類,hover在後面覆蓋了active的顏色，因此沒法看到active的顏色。故hover在active以前。²

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

  記住順序的口訣：「LoVe，HA」

---

1. HTML5與CSS3基礎教程（第8版）第七章第四節，[美] Elizabeth Castro　Bruce Hyslop　著，望以文　譯。 ↩
2. 引用自 <a>連接的四個僞類順序。 ↩