常见的color, font-family, background 等CSS属性都能够设置链接的样式，a链接的特殊性在于能够根据它们所处的状态来设置它们的样式。a标签与人交互的4个状态属于伪类状态切换，常见的链接四种状态为：a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻，具体看下面的代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a链接四种伪类状态切换实现人机交互</title>
<style type="text/css">
a:link{
color: red; /*初始状态*/
font-size: 10px;
letter-spacing: 10px;
}
a:visited{
color: green;/*点击访问*/
font-size: 20px;
text-decoration: none;
}
a:hover{
color:blue ;/*鼠标移动*/
font-size: 30px;
text-decoration: overline;
}
a:active{
color: yellow;/*点击状态*/
font-size: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<a href="#" title="" target="_self">免费资源网</a>
</body>
</html>
