常见的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>