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

时间：2023-01-09 22:36:34

常见的color, font-family, background 等css属性都能够设置链接的样式，a链接的特殊性在于能够根据它们所处的状态来设置它们的样式。a标签与人交互的4个状态属于伪类状态切换，常见的链接四种状态为：a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻，具体看下面的代码展示：

 <!DOCTYPE html>

 <html lang="en">

 <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>

相关文章