html

a标签的奇技淫巧:

伪装标签:

伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte

遵行的原则:"爱恨准则" LoVe HAte

用法:

 1 伪类选择器
 2     伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则"  LoVe HAte
 3     
 4     /*没有被访问的a标签的样式*/
 5     .box ul li.item1 a:link{
 6         
 7         color: #666;
 8     }
 9     /*访问过后的a标签的样式*/
10     .box ul li.item2 a:visited{
11         
12         color: yellow;
13     }
14     /*鼠标悬停时a标签的样式*/
15     .box ul li.item3 a:hover{
16         
17         color: green;
18     }
19     /*鼠标摁住的时候a标签的样式*/
20     .box ul li.item4 a:active{
21         
22         color: yellowgreen;
23     }

 效果看下边这段代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试页面</title>
 6     <link rel="shortcut icon" href="../百度登陆/logo.png" type="img/icon">
 7     <style type="text/css">
 8         <!---->
 9 
10         .box ul li a:link{
11             color: greenyellow;
12         }
13         .box ul li a:visited{
14             color: deeppink;
15         }
16         .box ul li a:hover{
17             color: aqua;
18         }
19         .box ul li a:active{
20             color: red;
21         }
22 
23     </style>
24 </head>
25 <body>
26     <p>5555</p>
27     <button>4444</button>
28     <div class="box">
29         <ul>
30             <li>
31                 <a href="https://www.baidu.com">百度一下</a>
32             </li>
33         </ul>
34     </div>
35 </body>
36 </html>
原文地址:https://www.cnblogs.com/linga/p/9445898.html