CSS 又名 層疊樣式表，所謂層疊，就是後面的樣式會覆蓋前面的樣式，所以在樣式表中，各樣式排列的順序很有講究。
: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;
}
你可能會問，css是層疊樣式表，那是不是就意味著寫在後面的樣式一定會覆蓋前面的樣式呢？