1、伪类：同一个标签，用户不同的状态，就会有不同的样式。
一定要是如下的顺序，不能更改，更改后可能就会没有效果。
a:link{ color:red;}这个是从未访问的超级链接为红色
a:visited{color:blue;}这个是访问后的超级链接变为蓝色
a:hover{color:green;}这个是鼠标放上去的时候超链接的文字颜色变为绿色，是一种交互效果
a:active{color:black;}这个是鼠标点击但是不松开会变为黑色
2、工作中的超级链接要求用户点到某个区域就相当于点到超链接。所以，工作中a标签大都和li一样宽高，这样就需要将a标签变为块级元素。
<!DOCTYPE html> <html> <head> <title>导航条超链接美化.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> *{margin:0;padding:0;} .nav{ width:960px; border:1px solid red; margin:100px auto; overflow:hidden; } .nav ul{ list-style:none; } .nav ul li{ width:120px;<!--设置120px正好是div盒子的宽度，用li标签盒子的宽度去撑起间隔--> float:left; } .nav ul li a{ text-decoration:none; display:block; width:120px; height:40px; text-align:center; line-height:40px; } .nav ul li a:link{ color:red;//这个红色为什么出不来啊？ } .nav ul li a:visited{ color:blue; } .nav ul li a:hover{ background:purple; color:yellow; } </style> </head> <body> <div class="nav"> <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> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> </ul> </div> </body> </html>
