a标签的4个伪类

伪类用于向被选中的元素添加特殊的效果。

link：为访问的（默认状态下）

visited：访问过后的（点击过后的）

hover：鼠标悬停（鼠标经过）

active：链接激活（鼠标按下，但没抬起）

特别要注意的是：

IE6不支持a标签以外的任何标签的伪类。

效果：

默认情况下：

css:

a{color:red;font-size:20px;}

html:

<a href="#">a标签</a>

鼠标滑过：

css:

a:hover{color:blue;font-size:30px;}

鼠标按下：

css:

a:active{color:green;font-size:25px;}

访问过后：

css:

a:visited{color:black;font-size:20px;}

通过这4个伪类，便能实现a标签的不同效果，不过需要注意的一个问题，就是这4个伪类的书写顺序。

如果4个伪类的顺序，像这样：

a{color:red;font-size:20px;}a:hover{color:blue;font-size:30px;}a:active{color:green;font-size:25px;}a:visited{color:black;font-size:20px;}

你可能也就只能在第一次点击以及经过a标签的时候看到效果，点击过后，只能看到字体大小的变化，颜色变化就没有了。

最好将顺序改成这样：

a{color:red;font-size:20px;}a:visited{color:black;font-size:20px;}a:hover{color:blue;font-size:30px;}a:active{color:green;font-size:25px;}

也是就改变visited的位置这样的话在访问过后，还是可以看到鼠标滑过以及按下的效果。默认的的效果可能看不到，这是因为缓存的问题，清除下缓存就ok了。