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匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javascript基本语法分析说明
2008/06/15 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
js常用代码段收集
2011/10/28 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS作用域链详解
2017/06/26 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python Django 命名空间模式的实现
2019/08/09 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
公司成本主管岗位责任制
2014/02/21 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
2015年调度员工作总结
2015/04/30 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python