關於標簽的4個偽類

<a> 的4個偽類分別是:

　　:link ( 有鏈接屬性的時候顯示 -- href 屬性 )

　　:visited ( 鏈接地址被訪問過 )

　　:hover ( 鼠標移動到DOM節點上面 )

　　:active ( 鼠標點擊瞬間 )

 

-> link & visited ?

/*css*/

a:link{color:green;}
a:visited{color:red;}

<!--HTML-->
<a href="http://www.baidu.com">顯示了:visited的樣式</a>
<a href="#321312">顯示了:link的樣式</a>
<a href="#">顯示了:visited的樣式</a>
<a href="javascript:void(0)">顯示了:link的樣式</a>
<a href="">顯示了:visited的樣式</a>
<a>沒有任何樣式</a>

由上面的demo測試可以看出，<a>標簽擁有 href 屬性是顯示:link 或者 :visited的前提，如果 href 屬性是一個正常的地址連接(例如:http://www.baidu.com)、為空、為"#"符號則顯示visited樣式,如果為"#"符號后面加任意一字符或者字符串、javascript:void(0)表達式則顯示:link的樣式

 

-> hover & active ?

/*css*/

a:hover{color:red;}
a:active{color:green;}

<!--HTML-->
<a href="http://www.baidu.com">:active要放在:hover后面，點擊時:active才起效</a>

上面的demo測試，:active偽類需要放在:hover偽類后面，因為當鼠標點擊<a>標簽的時候觸發了:active同時也觸發了:hover，如果:hover寫在:active就會把:active的顯示樣式給覆蓋，就是永遠也看不到:active的點擊樣式

 

-> hover & visited ?

/*css*/

a:visited{color:yellow;}
a:hover{color:green;}

<!--HTML-->
<a href="http://www.baidu.com">:visited需要放置在:hover前面</a>

上面的demo測試，:visited偽類需要放置在:hover前面，因為如果將:hover放置在:visited之前，:visited觸發的鏈接會一開始就將:hover覆蓋。

 

【總結】

　　對於<a>標簽的四個偽類，就像是css的一條規則“后面覆蓋簽名的樣式”，以上總結如果這四種偽類同時並存的話，其書寫的順序應該是 l ( :link ), v ( :visited ) , h ( :hover ) , a ( :active )。