:link,:visited,:focus,:hover,:active詳解

:link 與 :visited 在樣式文件中的順序可以隨便放置。

而focus， hover，active這幾個，如果你設置的順序不同，會直接影響樣式的顯示效果，下面會詳細解釋。

:focus -> :hover -> :active

 

有些人可能會困惑，爲什麼必須要按這樣的順序，而不能打亂呢？ 其實他們每一個選擇器都代表一個含義。

:link代表爲訪問鏈接的樣式，所以只要你是超鏈接，且未被訪問過，則鏈接都會按照你設定的樣式顯示，所以它的位置順序無所謂。

:visited代表鏈接訪問後的樣式，則鏈接一旦被訪問，則之後它的樣式就會是你所設置的visited樣式

重點是下面這幾個：

:focus 代表的是獲取焦點時的樣式，有人說啥是獲取焦點時的樣式，這個我們可以通過tab鍵來查看，一旦鏈接獲取了焦點，則它的樣式就是你設置的focus樣式

:hover 代表的是你光標經過某一元素時的樣式，如果將此樣式放在:focus之後，則當鏈接獲取焦點時，顯示:focus樣式，當光標經過此鏈接時，會顯示hover的樣式，因爲hover排在後，會覆蓋focus樣式。

            如果:hover排在前，:focus排在後，則當光標獲得焦點時顯示:focus的樣式，但當光標經過鏈接時，樣式並未顯示:hover的樣式，而是繼續是:focus的樣式，因爲應用的focus樣式在hover之後，覆蓋了前面的樣式。

 

測試代碼如下:

a:focus{
color:#AA80FE;
text-decoration:underline;
}
 
a:hover{
color:#FF0000;
text-decoration:underline;
}

a:hover{
color:#FF0000;
text-decoration:underline;
}
 
a:focus{
color:#AA80FE;
text-decoration:underline;
}

:active 代表元素被激活時的樣式，也就是元素被按下時的樣式，如果:active選擇器與 :focus , :hover 調換位置，則顯示的效果也會不同，因爲排在後面的樣式，會覆蓋前面的樣式。

 

測試代碼如下：

a:hover{
color:#FF0000;
text-decoration:underline;
}
 
a:active{
color:#FFCC00;
}

a:active{
color:#FFCC00;
}
 
a:hover{
color:#FF0000;
text-decoration:underline;
}