码迷,mamicode.com
首页 > Web开发 > 详细

《精通CSS》对链接应用样式

时间:2014-06-18 21:17:25      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   ext   color   

CSS的链接伪类选择器:

  :link --- 用来选择没有被访问过的链接

  :visited --- 用来选择被访问过的链接

  :hover --- 用来选择鼠标悬停的元素

  :active --- 用来选择被激活的元素,对于链接来说,激活发生在链接被点击时

大多数人最初使用这些选择器的目的之一是去掉链接下面的下划线,然后在鼠标停留在链接上或者点击时再打开下划线。实现的方法是将未访问的和已访问的链接的text-decoration属性设置为none,将鼠标停留和激活的链接的text-decoration设置为underline:

a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

在前面的实例中,选择器的次序非常重要,如果次序反过来,鼠标停留和激活的样式就不起作用了:

a:hover , a:active {text-decoration: underline;}
a:link , a:visited {text-decoration: none;}

这是由层叠造成的:当两个规则具有相同的特殊性时,后定义的规则优先。所以正确的顺心应该是:a:link,a:visited,a:hover,a:active。

《精通CSS》对链接应用样式,布布扣,bubuko.com

《精通CSS》对链接应用样式

标签:style   class   blog   code   ext   color   

原文地址:http://www.cnblogs.com/born4love/p/3790398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!