css对<a>标签提供了相关可制动态效果的css伪类别属性,常用的属性如下：
| 属性 | 说明 |
|---|---|
| a:link | 超链接的普通样式 |
| a:visited | 被点击过的超链接样式 |
| a:hover | 鼠标指针经过超链接上时的样式 |
| a:active | 在超链接上单击时,既"当前激活"时超链接的样式 |
更多请看：http://www.runoob.com/css/css-link.html
其它伪类别属情：http://www.runoob.com/css/css-pseudo-elements.html
案例：
<!DOCTYPE html>
<html>
<head>
<title>伪类别属性</title>
<meta charset="utf-8">
<style type="text/css">
.mynav{
padding: 0px;
list-style-type: none;
}
.mynav li{
width: 150px;
height: 40px;
list-style-type: none;
}
.mynav li a{
width: 150px;
height: 40px;
display: block;
text-align: center;
border-radius: 5px;
line-height:40px;
overflow:hidden;
font-size: 14px;
}
.mynav li a:link,.mynav li a:visited{
text-decoration: none;
background: #ffcc00;
color: #202020;
}
.mynav li a:hover{
text-decoration: none;
background: blue;
color: #fff;
}
</style>
</head>
<body>
<ul class="mynav">
<li><a class="aabbc" href="#">基本设置</a></li>
<li><a href="#"><span>个人资料</span></a></li>
<li><a href="#"><span>微博认证</span> </a></li>
<li><a href="#"><span>黑名单</span> </a></li>
<li><a href="#"><span>赞赏设置</span> </a></li>
<li><a href="#"><span>账号管理</span> </a></li>
</ul>
</body>
</html>
案例2：
<!DOCTYPE html>
<html>
<head>
<title>menu伪类别案例</title>
<meta charset="utf-8">
<style type="text/css">
ul{
display: inline-block;
list-style-type: none;
padding: 0px;
}
ul li{
width: 180px;
height: 40px;
}
ul li a{
background: pink;
width: 180px;
height: 40px;
font-size: 14px;
display: inline-block;
text-align: center;
line-height:40px;
text-decoration: none;
}
ul li a:link,ul li a:visited{
color: #222;
text-decoration: none;
border-radius: 5px;
}
ul li a:hover{
background: #aabbcc;
border-radius: 5px;
}
ul li a:active{
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li><a href="#">基础设置</a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">微博认证</a></li>
<li><a href="#">黒名单</a></li>
<li><a href="#">赞赏设置</a></li>
<li><a href="#">账号管理</a></li>
</ul>
afdafdsafa
</body>
</html>
效果
QQ20171128-150628.gif
