a标签的css样式四个状态


Posted in HTML / CSS onMarch 09, 2021

a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。

表示所有状态下的连接 如 a{color:red}

  • a:link:未访问链接 ,如 a:link {color:blue}
  • a:visited:已访问链接 ,如 a:visited{color:blue}
  • a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
  • a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。

前三者分别对应body元素的link、vlink、alink这三个属性。

举例:伪类的常见状态值

<style type="text/css"> 
a {
	font-size: 16px
}
a:link {
	color: blue;
	text-decoration: none;
} //未访问:蓝色、无下划线 
a:active: {
	color: red;
} //激活:红色 
a:visited {
	color: purple;
	text-decoration: none;
} //已访问:purple、无下划线 
a:hover {
	color: red;
	text-decoration: underline;
} //鼠标移近:红色、下划线 
</style> 

 

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
纯CSS3实现质感细腻丝滑按钮
Mar 09 #HTML / CSS
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
CSS心形加载的动画源码的实现
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
详解CSS样式中的 !important * _ 符号
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
You might like
第十一节 重载 [11]
2006/10/09 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python中for循环详解
2014/01/17 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
python绘制汉诺塔
2021/03/01 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
师范生个人推荐信
2013/11/29 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
企业金融服务方案
2014/06/03 职场文书
捐资助学感谢信
2015/01/21 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
JavaScript函数柯里化
2021/11/07 Javascript