常見的color, font-family, background 等css屬性都能夠設置鏈接的樣式，a鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。a標簽與人交互的4個狀態屬於偽類狀態切換，常見的鏈接四種狀態為：a:link - 普通的、未被訪問的鏈接a:visited - 用戶已訪問的... ...
常見的color, font-family, background 等css屬性都能夠設置鏈接的樣式，a鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。a標簽與人交互的4個狀態屬於偽類狀態切換，常見的鏈接四種狀態為：a:link - 普通的、未被訪問的鏈接a:visited - 用戶已訪問的鏈接a:hover - 滑鼠指針位於鏈接的上方a:active - 鏈接被點擊的時刻，具體看下麵的代碼展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>a鏈接四種偽類狀態切換實現人機交互</title> 7 <style type="text/css"> 8 a:link{ 9 color: red; /*初始狀態*/ 10 font-size: 10px; 11 letter-spacing: 10px; 12 } 13 a:visited{ 14 color: green;/*點擊訪問*/ 15 font-size: 20px; 16 text-decoration: none; 17 } 18 a:hover{ 19 color:blue ;/*滑鼠移動*/ 20 font-size: 30px; 21 text-decoration: overline; 22 } 23 a:active{ 24 color: yellow;/*點擊狀態*/ 25 font-size: 40px; 26 border: 1px solid red; 27 } 28 </style> 29 </head> 30 <body> 31 <a href="#" title="" target="_self">大灰牛博客</a> 32 </body> 33 </html>
