关于a伪类的顺序

昨天董老师说她设置的a伪类在点过链接以后当鼠标再经过的时候就不动弹了。想想这个可能是很多人会遇到的问题,就借此机会趁空间恢复了将博客更新一下。

她的默认设置如下:

1
2
3
4
a:link {text-decoration: none;color: #FFFFFF}
a:active {text-decoration:none;color: #000000}
a:hover { text-decoration:none;color: #000000} 
a:visited { text-decoration: none;color: #FFFFFF}

这段话说的意思是链接是白色,激活时候是黑色的,浏览过的继续是白色。
但是她现在碰到的问题是:当一个链接成为visited状态的以后,鼠标结果以后不再是黑色,也就是说a:hover在链接点过以后将不再有效。

Css在执行的时候,在碰到同类属性时候一般都认最后一个属性,比如body {color:red;color:green;}出来后的颜色是green而不是red。那么这样就很好理解上面错误发生的原因了,更换一下顺序就哦了。

修改如下:

1
2
3
4
a:link {text-decoration: none;color: #FFFFFF}
a:active {text-decoration:none;color: #000000}
a:visited { text-decoration: none;color: #FFFFFF}
a:hover { text-decoration:none;color: #000000}

这样问题就解决了。

顺便说一下,a伪类的顺序一般为:a:link、a:visited、a:hover、a:active 。所以上面最终调节的效果应该为:

1
2
3
4
a:link {text-decoration: none;color: #FFFFFF}
a:visited { text-decoration: none;color: #FFFFFF}
a:hover { text-decoration:none;color: #000000} 
a:active {text-decoration:none;color: #000000}

否则在鼠标点下链接的时候(a:active)还会出现上面的状况。

发表评论

电子邮件地址不会被公开。 必填项已用*标注