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/
关于作者:专注虚拟化,运维开发,RPA,Rust,Go,Python!
本文版权归作者和博客园共有,禁止*.csdn.net转载,禁止以盈利为目的的转载,转载文章,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 原文链接 如有问题, 可邮件(oldsixa@163.com)咨询.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)