#a标签的伪类选择器
2017-09-13 本文已影响0人
xf0128
今天我们来学习一下a标签的4个伪类选择器：
①a:link选择器：修改从未被访问过的a标签样式。
②a:visited选择器：修改已经被访问过的a标签样式。
③a:active选择器：修改链接被长按时的样式。
④a:hover选择器：修改鼠标悬停在a标签上的样式。
举个列子：
[html] view plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签伪类选择器</title>
<style type="text/css">
.box1:link{
color: green;
}
.box2:visited{
color: pink;
}
.box3:active{
color: black;
}
.box4:hover{
font-weight: bold;
}
</style>
</head>
<body>
<a href="#" class="box1">明天</a>
<hr>
<a href="#" class="box2">你好</a>
<hr>
<a href="#" class="box3">我们</a>
<hr>
<a href="#" class="box4">在路上</a>
</body>
</html>
------------------------------------分割线----------------------------------
a标签为类选择器的注意点：
①a标签的伪类选择器如果一起出现，那么一定要按照一个严格的标准实现：
先编写未点击状态:link→再编写已点击状态:visited→再编写鼠标悬停状态:hover→最后编写长按状态:active
如果顺序被颠倒，那么可能会没有效果。
编写的顺序要遵守爱恨原则：l(link)o v(visited) e、h(hover) a(active) t e。
②如果默认状态的样式和被访问过的样式一样，那么可以简写成a{color:...;}
---------------------------------分割线--------------------------------------
下面来做一个关于a标签伪类选择器的练习（制作一个导航条）：
[html] view plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签伪类选择器之导航条制作</title>
<style type="text/css">
div{
width:964px;
height: 30px;
background-color: pink;
margin:0 auto;
margin-top: 50px;
text-align: center;
}
div a{
display: inline-block;
width: 100px;
line-height: 30px;
/*border: 1px solid #000;*/
}
a:link{
color: black;
font-family: "微软雅黑";
}
a:visited{
color: white;
}
a:hover{
background-color: #cdcdec;
color: green;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<div>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</div>
</body>
</html>
（一般情况下 导航条的制作是用ul li标签来做的。这里我们为了图个方便，就直接用a标签来做）。
