【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。
给出我试的顺序,可能会对大家有一些帮助:
a:link {color: #000000;text-decoration: none
}
a:visited {color: #000000;text-decoration: none
}
a:hover {color: #ff7f24;text-decoration: underline;
}
a:active {color: #ff7f24;text-decoration: underline;
}
a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。
我想,原因就在于浏览器解释CSS时遵循的“就近原则”。
举例来说:
我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:
<1>.第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
<2>.第二种情况:我把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。
这是因为,一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。
在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成绿色,不满足,则继续向上查找,一直找到满足条件的定义为止。
一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。
近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。
再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .
最后经验补充:
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;
所以说,a:hover定义一定要放在a:link、a:visited的后面,,,
温故而知新:
- a:link 设置 a 对象在未被访问前的样式。
- a:visited 设置 a 对象在其链接地址已被访问过时的样式。
- a:hover 设置 a 对象在其鼠标悬停时的样式。
- a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序相关推荐
- CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
CSS为一些特殊效果准备了特定的工具,我们称之为"伪类".其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 代码如下: :link : ...
- HTML中a:link,a:visited,a:hover,a:active
原文地址:http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html 1:解释 link:连接平常的状态 visited:连接被访问 ...
- 链接样式顺序:link、visited、hover、active
1.介绍 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当设置为若干链路状态 ...
- [css] 请写出:link、:visited、:hover、:active的执行顺序
[css] 请写出:link.:visited.:hover.:active的执行顺序 :link未访问链接:visited已访问的链接:hover鼠标悬停:active鼠标按下顺带一提,可交互式的组 ...
- php超链接样式,html和css中设置超链接样式方法的总结
在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...
- CSS基础笔记——超链接样式
在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色 而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式 a:link{...} a:visi ...
- html超链接样式顺序,超链接4个伪类 CSS定义超链接样式有什么顺序
超链接的伪类有哪些?分别表示什么含义 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:ho ...
- CSS之设置超链接样式以及设置鼠标形状
超链接在任意一个网页上都是最基本的元素之一,通过超链接可以实现页面的跳转.功能的激活等,我们来学习如何使用CSS设置超链接的样式 定义超链接是使用**标签,用于从一个页面链接到另一个页面, 元素最重要 ...
- css如何设置超链接样式
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...
最新文章
- 谈谈对Spring IOC的理解
- FCKeditor的使用说明
- linux配置apache文件大小,linux下apache中httpd.conf文件配置参数说明
- Java实例---计算器实例
- Yolov5身份证检测——C++ OpenCV DNN推理
- zabbix启动无效,无法监听10051
- react全局状态管理_react 状态管理的复杂度来源
- 探索 .NET Core 依赖注入的 IServiceProvider
- BZOJ 4278: [ONTAK2015]Tasowanie 后缀数组 + 贪心 + 细节
- ​无需聚类,杭电学者提出基于软化相似度学习的无监督行人再识别
- 转】.NET强名称工具(Sn.exe)使用详解
- 前端开发需要掌握什么技术,成为一个高薪的web前端程序员很难吗?
- 为什么事业单位公务员的公积金比企业里要缴得多?
- android浮动标题栏,GitHub - DARTTTTT/LBehavior: 跟随手势滑动,显示隐藏标题栏、底部导航栏及悬浮按钮的Android Behavior Library...
- margin-top的兼容问题
- (五)洞悉linux下的Netfilteriptables:如何理解连接跟踪机制?(1)
- 并发(二)——linux内核同步机制分析
- c语言程序有哪几类词汇,c语言是什么 c语言必背词汇有哪些
- Axure基本使用(一)
- 移动端网站优化需要具备哪些条件
热门文章
- jq项目如何启服务_用小项目详解我们应该如何去构建我们的微服务
- mongodb 备份压缩_MongoDB-备份和恢复
- python ico_Python协程asynico模块解读
- 类型转为数字_JavaScript自动数据类型的转换
- 杭电计算机研究院排名,2020浙江省大学最新10强排名,浙大第1,杭电第5
- 文件的存取方式java_三种访问文件的方式
- 服务器装哪个操作系统好,服务器装哪个操作系统好
- SQLAlchemy Transactions
- 2.10 m 个样本的梯度下降
- neo4j remove