注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

关于A伪类的顺序  

2013-04-22 18:06:08|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

我们先来看下官方给的示例代码:

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

有个通俗的记忆方法:“love-have”依照这两个单词的的顺序来进行排列。

它们的顺序是依据什么而定的呢?其实很简单,我们只需要注意我们在选择操作链接时的状态就能发现,哪个伪类的权限要高。

默认的":link"权限是最低的,排在第一,这是毋庸置疑的。

":visited"是已经访问过的,访问过后样式就得变个样,所以你点击过后这个样式就会变了,除非你重新清空下浏览器的缓存,但是谁又会有那么多的时间去管这些呢?除非像我们这些前端开发人员。

":hover"这个伪类相信大家都是非常熟悉它的,因为只要你上网浏览网页这个伪类就会出现,非常的引人注目,不像":active"一样藏的够深,需要点击的时候才会显示出来。不管是访问过的,还是没访问过的,只要你的鼠标有操作,它都会出现在你的眼前。所以他的权限都比前面连个要高,顺序也就靠后。

最后就是":active"这个伪类了,这个更厉害,它的权限比":hover"还高,为什么呢? 官方解释是“被选中的链接”,什么意思呢?就是当你点下的时候,在javascript里的事件就是“onmousedown”这个事件,现在明白了吧!点下的时候这也是个事件,也就可以再添加个样式,还要显示出来,那根据CSS权限定论来说的话就得写在前面三个伪类的后面了!这样他的样式特性才会显示出来!

有个网站在伪类的应用方面做的非常的经典,这个网站在每个伪类下都添加了非常吸引人的特效和背景图片,相信果粉现在已经知道了,没错,那就是到目前还是全球市值最高的公司“苹果”,大家可以去看看效果:http://www.apple.com.cn/ 。

还有其它的伪类,比如":focus"、":first-child"、":last-child"、":lang"这些都不怎么常用,而且在IE6-8都没有完美的支持。有兴趣的可以去W3C官网去看看,在这我就不一一介绍了。

  评论这张
 
阅读(691)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017