資訊專欄INFORMATION COLUMN
摘要：注意，鼠標點擊后不松開，此偽類一直激活，直到松開鼠標。哪些偽類會同時激活并影響顯示效果第一，其實和兩個偽類之間順序無所謂。此時鏈接依然存在，只是已經(jīng)被訪問過，所以偽類不再激活。
博主的博客地址：Stillwater的個人博客
轉載請注明原文鏈接
a:link{color:blue}
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}
link 當有鏈接，且該鏈接未被訪問過時，此偽類處于激活狀態(tài)。
vistied 某個鏈接已經(jīng)被訪問過時，此偽類處于激活狀態(tài)。
hover 鼠標懸停在某個鏈接上時，此偽類處于激活狀態(tài)，直到鼠標移開鏈接。
active 用鼠標點擊鏈接時，此偽類激活。注意，鼠標點擊后不松開，此偽類一直激活，直到松開鼠標。
二、標簽偽類書寫順序詳解 為什么要考慮偽類的書寫順序？??第一，CSS（Cascading Style Sheets）全稱翻譯為層疊樣式表。有時候多條規(guī)則會定義元素的同一個屬性，這時該怎么辦呢？CSS用層疊的原則來考慮樣式聲明，從而判斷相互沖突的規(guī)則中哪個規(guī)則應該起作用。首先，你編寫的樣式如果與瀏覽器的默認樣式?jīng)_突，均以你編寫的樣式為準。在此基礎上，CSS用層疊的原則來考慮特殊性（specificity）、順序（order）和重要性（importance），從而判斷相互沖突的規(guī)則中哪個規(guī)則應該起作用。不要受這些術語的影響，你只要去試，就能明白CSS決定該應用哪些樣式以及何時應用這些樣式的方式。1
??第二，由于標簽的這四個偽類的特殊性是一樣的，所以當某個鏈接處于的狀態(tài)同時激活多個偽類時，那么偽類的書寫順序就起到了關鍵作用，從而影響最終的顯示效果。這就是為什么我們要考慮偽類的書寫順序。
??第一，其實:link和:visited兩個偽類之間順序無所謂。因為它倆不可能同時觸發(fā)，即在未訪問的同時訪問過。此處注意，有人將:link理解成只要某元素有鏈接存在，就會激活，這是錯誤的。當鏈接被訪問過以后，:link就不再激活。我們做個試驗。
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}
??我們把:link放在最后，開始時鏈接未訪問，無論是我鼠標懸浮還是點擊，顏色都不會改變，都是藍色。當我第一次點擊鼠標并松開后，顏色變成紅色。然后再懸浮就會變成綠色，再點擊，就會變成紫色，再松開就恢復成紅色。藍色不會再出現(xiàn)。此時鏈接依然存在，只是已經(jīng)被訪問過，所以:link偽類不再激活。
??第二，從用戶習慣角度考慮，無論鏈接訪問或未訪問過，都希望當鼠標懸浮在鏈接上時能夠產(chǎn)生顏色變化，并且，無論鏈接訪問或未訪問過，產(chǎn)生的顏色變化應該是一樣的。所以應該把:hover放在:link和:visited后面
a:link{color:blue}
a:visited{color:red}
a:hover{color:green}
??第三，從用戶習慣角度考慮，無論鏈接訪問或未訪問過，都希望當鼠標點擊鏈接時能夠產(chǎn)生顏色變化，并且，無論鏈接訪問或未訪問過，產(chǎn)生的顏色變化應該是一樣的。所以應該把:active放在:link和:visited后面
a:link{color:blue}
a:visited{color:red}
a:active{color:purple}
??第四，順序上，總是先將鼠標懸浮在鏈接上，然后才能夠進行點擊操作，預期效果是懸浮時產(chǎn)生顏色變化，點擊鼠標時產(chǎn)生另一種顏色變化。若把hover放在active后面，當點擊鏈接一瞬，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前。2
a:link{color:blue}
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}
??記住順序的口訣：“LoVe，HA”
HTML5與CSS3基礎教程（第8版）第七章第四節(jié)，[美] Elizabeth Castro Bruce Hyslop 著，望以文 譯。 ?
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/115503.html