css链接颜色

浏览：2244 类型：程序语言发布人：Mykame 发布日期：2010/6/28 0:53:09

这段时间在用div+css做网页的时候,在css 链接颜色上面遇到一些问题.传统上，连接文本是蓝色的，已访问的连接是紫色的。也许，这是最有效、最有用的颜色。然而，伴随着css的广泛发展，这种颜色不会是平常的了，用户也不再假设连接必须是蓝色或紫色的。

css称这些链接状态为伪类选择器,在css思考方式里,"真"类属性是用class=的属性来明确指定的,而伪类选择器则是用(:hover ; :visited ; :link ; :active)来指定,具体意义及顺序如下:

a :link用在为访问的连接上。
a :visited用在已经访问过的连接上。
a :hover用于鼠标光标置于其上的连接。
a :active用于获得焦点（比如，被点击）的连接上。

有人或许要问了,难道顺序也有限制吗?在刚学css的时候,不明白为什么自己在链接设置上面都设置的很好了,但显示出来却不是自己想要的那种效果,这是因为一些浏览器会忽略一条或者更多的锚元素伪类规则,除非它们早已按次序排列出来, 就是上面所显示顺序,也挺好记的(LVHA)

在css链接这些属性中,常用到的是color(文字颜色属性),background(背景颜色属性),text-decoration(文字修饰属性即是否有下划线)

一般情况下,只要按照上面顺序,在css中都能很好的定义链接样式,但今天却遇到一个问题,思考了好久,也不明白是怎么回事,只能暂时归结于是bug造成的.

在修改blog模板的时候,"我的分类"里面的文字链接样式想定义成目前大家看到的这个样子,于是csscss 链接颜色样式表如下:

#tb2 a:link{color:#706A5E;
text-decoration:none; }
#tb2 a:visited{color:#706A5E;
text-decoration:none; }
#tb2 a:hover{
color:#FFFFFF;
background-color: #706A5E ;
text-decoration:underline; }
问题出现了,点击后,文字颜色就变成了紫色,并成了默认点击后文字的颜色,如图A.

检查了半天,发现顺序,设置都没有问题,但问题出在哪儿了呢?于是将css链接样式重新改写成: #tb2 A:link,#tb2 A:visited,#tb2 A:active{ text-decoration: none;color: #706A5E;}
#tb2 A:hover{ color:#FFFFFF;
background-color: #706A5E ;
text-decoration:underline; }

有意思的是,这样设置就可以达到自己想到的效果,点击后如图3所示.