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和jquery
Nov 21 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
css 边框添加四个角的实现代码
Oct 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
推荐php模板技术[转]
2007/01/04 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php session的应用详细介绍
2017/03/22 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
selenium自动化测试入门实战
2020/12/21 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
绿色家庭事迹材料
2014/05/01 职场文书
故宫的导游词
2015/01/31 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
在项目中使用redis做缓存的一些思路
2021/09/14 Redis