a標簽偽類link，hover，active，visited，focus區別

<div id="content">
        <h3><a class="a1" href="#">a標簽偽類link，hover，active，visited，focus區別</a></h3>
</div>    

 

a.a1:link{        /*鏈接未被訪問時的狀態*/
  color: blue;
}
a.a1:visited{     /*鏈接訪問后的狀態*/
  color: green;  
}
a.a1:hover{       /*鼠標飄上去的狀態*/
  color: red;
}
a.a1:focus{       /*鼠標點擊后，剛松開的狀態*/
 color: orange;   
}
a.a1:active{      /*點擊中的狀態，鼠標未松開時*/
  color: yellow;
}

 

a:link:鏈接未被訪問時的狀態，原始狀態

未設置超鏈接則屬性無效

a:visited:點擊之后顯示的顏色，鏈接被訪問后呈現的顏色

visited針對的是url，如果兩個a標簽都指向一個鏈接，點擊一個后另一個也有visited屬性

聚焦后，列如，有一個空連接，點擊后呈現focus（橘色），當鼠標聚焦其他內容，比如點擊空白區域后，空連接文本就顯示的是visited屬性（綠色），或點擊的是有效鏈接跳轉后，返回當前頁就是綠色

未設置超鏈接則無效

a:hover:鼠標飄上去的顏色

a:focus : 聚焦，鼠標點擊后剛松開顯示的屬性

點擊完，鼠標剛松開，如果未設置focus，鼠標剛松開后會先顯示原始狀態link（藍色），之后顯示visited屬性綠色（不需要點擊其他聚焦，因為當前div沒有聚焦），再次點擊后松開就不會顯示藍色了，因為此時的原始色已改為點擊后的顏色綠色，所以鼠標松開后就會變回綠色，如果設置了hover，鼠標松開后，會先顯示hover，然后顯示visited顏色

如果未設置active,focus就等於點擊中和點擊后的狀態

內容是純文本則無效

a:active：點擊中，顯示的顏色，鼠標未松開時

標簽偽類的順序：

link-》visited -》hover -》focus -》active

按着上面的css，h3標簽內顯示的順序應該是 :

link（藍色）-》鼠標飄上去hover（紅色）-》點擊中active（黃色） -》鼠標是松開focus （橘色）-》聚焦其他內容，visited（綠色）