在CSS1中,只有三个伪类。前面已经见过的:visited,再加上:link和:active。每个都指代一种定位锚:
:link – 指超链接,也就是说具有HREF属性,是一个未访问过的地址。注意有些浏览器可能将:link翻译成指向任何超链接,访问过或未访问过的;
:visited – 指已经访问过的网页的定位锚;
:active -指任何已经处于活跃状态,例如被点击的定位锚。在CSS1里,这只用于超链接,然而在CSS2中,:active理论上可以用于任何元素;
第一个伪类看起来似乎是多余的。毕竟,如果定位锚未被访问过,那么它肯定是未访问过的(unvisited)。因此,我们就只需像下面这样去做:
A {color:blue;}
A:visited {color:red;}
看上去似乎是合理的,但实际上并不完全如此。第一条规则不仅会应用于来访问过的链接,而且会应用于目的定位锚,如下:
上面的文本也会是蓝色的,因为A元素也匹配上面的规则。所以为了避免将链接样式应用于目的定位锚,应该使用:link伪类:
A:link {color:blue;} /*unvisited links are blue*/
A:visited {color:red;} /*visited links are red*/
A:active {color:yellow;} /*anchors turn yellow while clicked*/
或许你已经意识到了:link,:visited和:active选择符在功能上等价于BODY属性的LINK,VLINK和ALINK。当然,对丁CSS中的伪类来说,应用不仅仅是在颜色方面。
假设某人想创建一个网页,使所有未访问过的链接呈紫色,访问过的呈红色,当用户点击时呈蓝色,可以像下面这样来做:
在CSS中,可以这样来实现:
A:link {color:purple;}
A:visited {color:red;}
A:active {color:yellow;}
在这里我们又可以重温一下类选择符以及它们是怎样同伪类组合的。例如,假设要改变指向网站之外的链接的颜色。这很容易,可以为这些定位锚分配一个类。例如:
为了对外部链接应用不同的样式,只需一条规则即可:
A.external:link,A.external:visited {color:maroon;}
这就可以将前面的第二个链接的颜色设成褐色,而第一个链接将是缺省的链接颜色,通常是蓝色。
实际问题
对于定位锚伪类有一些有趣的问题。例如,可以将访问过和未访问过的链接设置成相同大小的字体,而将活跃的链接的字体设得更大一些:
A:link,A:visited {font-size:12pt;}
A:active {font-size:18pt;}
正如从下图中可以看到的那样,用户代理增大了链接的字体。支持这种行为的用户代理在这一链接被点击后不得不重新显示此文档。然而,CSS规范特别陈述了这样一条规则:一旦在文档最初显示一次后,用户代理就不必重新显示了。但这也不是绝对的,因此设计时也要尽量避免对这一行为的依赖。
弱弱的警告:Navigator 4.x和Opera 3.x并不支持伪类,而IE 4.x和IE 5.x都支持它。