简单的链接样式-CSS

一. 链接的伪类选择器们

a:link{} 没有被访问过的链接

a: visited{} 被访问过的链接

a: hover{} 鼠标悬停处的链接

a: active{} 被激活的链接

a:focus{} 被聚焦的链接

 

二. 其他元素的伪类选择器

例如,在表格行添加:hover伪类,在提交按钮上添加:active伪类,在输入框添加:focus伪类

 

三.链接的伪类选择器样式设置

去下划线:鼠标悬停在连接或单击链接时取消下划线。 将未访问的和已访问的链接设为text-decoration:none; 将鼠标悬停其上其上和已激活的链接设为
text-decoration:underline;

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


四.注意事项

当两个规则具有相同的属性的时候,后定义的规则优先。在上一示例中,link 和 visted样式会覆盖 hover 和 active。为了确保不会发生这种情况,最好按照以下次序应用链接样式:

a:link, a:visited, a:hover, a:focus, a:active;

记忆秘诀:Lord Vader Hates Furry Animals

L link, V:visited, H:hover, F:focus, A:active

 

posted @ 2015-11-26 01:05  Annguowenhua2015  阅读(230)  评论(0编辑  收藏  举报