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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
简单的js分页脚本
2009/05/21 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
js实现扫雷源代码
2020/11/27 Javascript
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
工商管理系学生的自我评价分享
2013/11/29 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
安全施工责任书
2014/08/25 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
怎样写辞职信
2015/02/27 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Redis Stream类型的使用详解
2021/11/11 Redis