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 相关文章推荐
css3圆角边框和边框阴影示例
May 05 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python编程argparse入门浅析
2018/02/07 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
详解django中Template语言
2020/02/22 Python
为什么是 Python -m
2020/06/19 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
高级销售求职信
2014/02/21 职场文书
单位委托书怎么写
2014/08/02 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
申请吧主发表的感言
2015/08/03 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技