a链接四种伪类状态切换实现人机交互

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

a链接四种伪类状态切换实现人机交互

全文结束