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>