- 浏览: 149337 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
http://blog.snsgou.com/post-2.html
在CSS中定义a:link、a:visited、a:hover、a:active顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。
给出我试的顺序,可能会对大家有一些帮助:
今天看到一位匿名朋友的问题,又去查了一些资料,这个人讲的非常透彻:引自灵眸●第一炉沉香博客
a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。
我想,原因就在于浏览器解释CSS时遵循的“就近原则”。
举例来说:
我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:
第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
第二种情况:我把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
在CSS中定义a:link、a:visited、a:hover、a:active顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。
给出我试的顺序,可能会对大家有一些帮助:
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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时遵循的“就近原则”。
举例来说:
我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:
第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
第二种情况:我把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
发表评论
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2014-05-06 11:07 317<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 577web前端页面性能优化 ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 513提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1031PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 585web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 556LABjs、RequireJS、SeaJS 哪 ... -
网站重构
2013-12-27 15:20 501网站重构 前不久听到 ... -
通过css zoom缩放,兼容Firefox
2013-11-15 15:12 1611通过css zoom缩放,兼容Firefox IE浏览器和 ... -
Html 5中自定义data-*特性
2013-11-13 15:19 512Html 5中自定义data-*特性 Html 5中支持用户 ... -
CSS布局-强大的负边距
2013-11-04 16:20 576http://www.cnblogs.com/2050/arc ... -
如何让表头th不滚动
2013-10-31 12:05 5651表格带滚动条 如何让表头th不滚动 <div ... -
CSS Sticky Footer: 完美的CSS绝对底部
2013-09-04 17:42 618CSS Sticky Footer: 完美的CSS绝对底部 ... -
流体布局
2013-09-04 11:53 649流体布局 在我的另一篇文章《弹性+固宽布局》http://li ... -
《弹性+固宽布局》
2013-09-04 11:32 691《弹性+固宽布局》 在 ... -
border 写的小三角
2013-05-28 14:31 677border 写的小三角 <!DOCTY ... -
IE HACK
2013-05-07 18:50 656IE HACK http://blog.163.com/ ... -
解决IE6的CSS背景闪烁问题
2013-05-07 18:20 1003解决IE6的CSS背景闪烁问题 http://www.kea ... -
CSS定位
2013-05-07 16:42 607CSS定位 http://baike.baidu.com/v ... -
clear:both;与 overflow:hidden;
2013-04-27 16:06 661clear:both;与 overflow:hidden; ... -
inline-block的使用及bug
2013-04-17 11:38 600inline-block的使用及bug http://ww ...
相关推荐
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。 给出我试的顺序,可能会对大家有...
a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a:active{ CSS样式规则; } 鼠标点击不动时超链接的状态 总结 ...
link、visited、hover、active 未移入a标签链接时:link 移入a标签链接时:link、hover 点击a标签链接时:link、hober、active 点击后未移入a标签连接时:link、visited 点击后移入a标签连接时:link、visited...
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接...伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才
伪类选择符包括:总: a 表示所有状态下的连接 如 .mycls a{color:red}① a:link:未访问链接 ,如 .mycls a:link {color:blue}② a:visited:已访问链接 ,如 .mycls a:visited{color:blue}③ a:active:激活时(链接...
友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号或双引号,否则会容易造成程序错误。 ============================...
A:link 超链接的默认样式 A:visited 访问过的(已经看过的)链接样式 A:hover 鼠标处于鼠标悬停状态的链接样式 A:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。 正常顺序如下: 复制...
css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即: a:link 链接平常的状态 a:visited 链接被访问过之后 a:hover 鼠标放到链接上的时候 a:active 链接被按下的时候
a:link, a:visited { color: #f5ea01; text-decoration: none; font-weight: bold; } a:active, a:hover { color: #f5ea01; text-decoration: underline; } p { margin: 0px; padding: 0px; }
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 伪元素选择器:并不是针对真正的元素使用的选择器,...
#nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-...
a:link,a:visited{ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px; } a:hover{ color:#0F0; text-decoration:underline; /*鼠标悬停时出现下划线*/ } a:active{ color:#F00;} ; ...
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue} ④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue} 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。 前三者...
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下... a:hover,定义鼠标悬浮在链接上时的样式; a:active,定义鼠标点击链接时的样式。 示例: 复制代
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的... a:hover,定义鼠标悬浮在链接上时的样式; a:active,定义鼠标点击链接时的样式。 示例: 复制代码代码如下: a:link { colo
a:link{ text-decoration:none; } a:visited { text-decoration: none; } a:hover { font-size: 18px; color: #FF0000; text-decoration: none; } a:active { text-decoration: none; } 包含CSS样式
A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#3C2F1D} A:hover{TEXT-DECORATION: underline;Color:#4455aa} BODY{ FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: 宋体; background-color: #ECF5FF...
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。 除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等。 而且CSS里不光有伪类...
超链接的样式有: a:link 链接未点击上去时候 a:visited 链接...–chrome浏览器下可以将链接原始属性都写在a:link中,IE内核的浏览器中链接的原始属性中除下划线之外的属性需写在a中–> a { font-size: 12px; color: