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

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

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是層疊樣式表，那是否是就意味着寫在後面的樣式必定會覆蓋前面的樣式呢？