CSS考點之一，標籤，偽類

一、<a></a>標籤常用的偽類概述

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

• link 當有鏈接，且該鏈接未被訪問過時，此偽類處於激活狀態。

• vistied 某個連結已經被訪問過時，此偽類處於啟動狀態。

• hover 滑鼠懸停在某個連結上時，此偽類處於啟動狀態，直到滑鼠移開連結。

• active 用滑鼠點擊連結時，此偽類啟動。注意，滑鼠點擊後不放開，此偽類一直激活，直到放開滑鼠。

• 二、<a></a>標籤偽類書寫順序詳解

• 為什麼要考慮偽類的書寫順序？

  第一，CSS（Cascading Style Sheets）全名為層疊樣式表。有時候多條規則會定義元素的同一個屬性，這時該怎麼辦呢？ CSS用層疊的原則來考慮樣式聲明，從而判斷相互衝突的規則中哪個規則應該起作用。首先，你寫的樣式如果與瀏覽器的預設樣式衝突，均以你寫的樣式為準。在此基礎上，CSS以層疊的原則來考慮特殊性（specificity）、順序（order）和重要性（importance），從而判斷相互衝突的規則中哪個規則應該起作用。不要受這些術語的影響，你只要去試，就能明白CSS決定該應用哪些樣式以及何時應用這些樣式的方式。 ¹
  第二，由於<a></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”

更多CSS考點之一，標籤，偽類相關文章請關注PHP中文網！