摘自：?http://www.cnblogs.com/xiayi/p/5350423.html

?

　<a>元素的作用是可以創建一個鏈接，鏈接對應4個狀態：未訪問，已訪問，鼠標懸停，鼠標點擊瞬間。

　　為了給鏈接的4個狀態應用樣式，引入偽類的概念。

　　什么是偽類呢？簡單點說，就是你沒定義這個類，但它確實作為一個類來使用。（這些類確實存在，瀏覽器在后臺會向這些類增加和刪除元素）

　　我在看《CSS設計指南》時，它說到四個偽類的書寫順序一定要正確，否則瀏覽器可能不會顯示預期的結果。

　　也即這樣寫：

a:link{color:black;} a:visited{color:gray;} a:hover{color:red;} a:active{color:blue;}

?

?　 為什么必須得按順序呢？

　　這個問題可以這樣來解答。

　　首先注意關鍵的兩點：1.這4個偽類特指度相同。2.一個鏈接可能同時處于多種狀態，即同時屬于多個偽類。

　　好，現在來詳細剖析。

　　未點擊鏈接前，link偽類長期處于激活狀態，鼠標懸停（或點擊）時，<a>鏈接同時處于link和hover(或active)狀態，由于它們特指度相同，在同時激活的情況下，后出現的偽類樣式會覆蓋前面的偽類樣式，故link狀態必須寫在hover(或active)之前。

　　再討論hover和active的順序，若把hover放在active后面，當點擊鏈接一瞬，實際你在激活active狀態的同時觸發了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前

　　其次，若把visited放在hover后面，那已訪問過的鏈接一直觸發著visited偽類，會覆蓋hover樣式。

　　最后，其實link、visited兩個偽類之間順序無所謂。（因為它倆不可能同時觸發，即又未訪問同時又已訪問。）

　　記這順序有個小招數，“LoVe？?HA!”。

轉載于:https://www.cnblogs.com/facial/p/5816186.html

總結

以上是生活随笔為你收集整理的a链接的四个伪类顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。