a标签伪类的书写顺序

L(link)OV(visited)e-H(hover)A(active)te

简单的介绍一下A 标签的4个伪类：
    1. ‘:link‘ ：适用于未被访问的链接；
    2. ‘:visited‘ ：适用于已经访问过的链接；
    3. ‘:hover‘ ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激活它时；
    4. ‘:active‘ ：适用于一个元素被用户激活时。

W3C制定的CSS21规范中指出：这四个伪类的声明顺序应该是：‘:link‘、‘:visited‘、‘:hover‘、‘:active‘。A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover内定义的相同规则。同理，A:active应在A:hover之后，否则A:active中的相同规则将被隐藏。

转：http://bbs.csdn.net/topics/340165155

时间： 2024-08-03 11:47:00

a标签伪类的书写顺序的相关文章

a 标签的伪类的正确顺序，以及原因

注意,a 标签的伪类是有顺序的,否则有可能样式不对:lvha,  原因:浏览器的就近原则,举个例子: 我定义的顺序是a:visited.a:hover.a:link,这时候就会发现,不管我有没有hover上去,样式都是link的样式的,这是因为鼠标经过的未访问链接同时拥有a:link.a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义. 所以,如果一个链接没有被访问过,那么它有可能同时拥有 link , hover 两个属性,

a标签伪类顺序以及jQuery选择器

Q:a标签伪类的顺序? A:顺序应该是: :link :visited :hover :avtice 原因:link和visited是a标签的常态属性,hover和active是a标签的即时状态. Q:jQuery选择器?如何准确快速的选择出想要的元素? A: 在用jQuery的时候,一个很重要的用法,就是要快速选择出自己想要的元素.把常用的选择记录下来: 基本选择器 ID选择器 $("#id").css("width","120px"); Cl

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果. 大部分人,都会用自己的方式,对这个顺序死记硬背. 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门. 我见过有酱婶的:lv的包包hao,这倒是实话. 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿

a标签伪类的LOVE HATE原则

a标签有四个伪类,分别是: a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接 遇到的问题: 访问过的链接,始终显示点过的样式,鼠标滑过或者点击时都不会有样式变动,具体css样式如下: 查询后知道a标签伪类有一个排序规则,否则会影响到显示. 解决方案: 按照LOVE HATE排序的顺序进行伪类排序. 即L(link)OV(visited)E H(hover)A(active)TE 修改排序后的代码:

a标签伪类的顺序

在一次开发项目中,我用a链接来做效果,测试的时候发现,a:hover被点击后的效果就不再了!我百度才知道,原来在css写a链接也是有顺序之分的. 顺序应该是: a:link a标签还未被访问的状态: a:visited a标签已被访问过的状态: a:hover 鼠标悬停在a标签上的状态: a:active a标签被鼠标按着时的状态: 本质就是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不用的动作顺序,动作的触发顺序决定了伪类的顺序. 因为前2者两种状态是常态,而后2者

html 超链接标签 锚点 a标签伪类

一个简易的连接 <a href="01.html">01</a> <body> <a href="01.html" target="_blank">01</a> <a href="https://www.bilibili.com/?spm_id_from=666.7.primary_menu.1"> B站</a> <a href=&quo

a标签伪类：visited下划线设置无效的原因及如何解决

今天第一次加入了个前端群,作为一名萌新,看到有群友提问"怎样取消a点击后的下划线?",顿感这不是很简单的问题嘛,于是抢答"a:visited{text-decoration:none;}",谁料这是无效的!源码(浏览器为chorme53.0.2785.143): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

&lt;a&gt;链接的四个伪类顺序

摘自: http://www.cnblogs.com/xiayi/p/5350423.html <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:

Day 47（08/02）选择器、 伪类

属性选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 E[att]          匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略.                 比如"[cheacked]".以下同.)   p[title] { color:#f00; } E[att=val]      匹配所有att属性等于"val"的E元素   div[class="error"] { col