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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 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
example2.php
2006/10/09 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
浅谈PHP的反射机制
2016/12/15 PHP
Yii全局函数用法示例
2017/01/22 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
学习ExtJS table布局
2009/10/08 Javascript
js几个验证函数代码
2010/03/25 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
民生工程实施方案
2014/03/22 职场文书
公司保密承诺书
2014/03/27 职场文书
社会工作专业求职信
2014/07/15 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
一年级小学生评语大全
2014/12/25 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫