伪类:
与类选择器相似但是又有所不同
锚伪类:
<style>
a:link
{
color: #2AABD2;
font: "微软雅黑";
font-size: 50px;
}
</style>
作用:给a标签设置没有访问过的样式
a:visited
a:visited
{
color: palevioletred;
font: "微软雅黑";
font-size: 30px;
}
作用:给a标签设置访问过的样式
a:hover
a:hover
{
color: #000000;
font: "微软雅黑";
font-size: 30px;
}
给a标签设置鼠标悬停时的样式
a:active
a:active
{
color:#3E8F3E;
font: "微软雅黑";
font-size: 30px;
}
</style>
作用:设置a标签激活时的样式
注意:在使用时一定遵循这样的顺序:
a:link a:visited a:hover a:active
有些锚伪类可以作用a标签上也可以作用在其他标签上:
- a:link,a:visited 只能用于a标签
- :hover,其他标签也可以使用这个伪类
- a:active,其他标签也可以使用这个伪类
五彩导航:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
color: white;
text-decoration: none;
background-color: pink;
width: 120px;
height: 58px;
display: inline-block;
text-align: center;/*水平居中*/
line-height: 58px;/*垂直居中*/
}
.one
{
background-color: paleturquoise;
}
.two
{
background-color: pink;
}
.three
{
background-color: plum;
}
.four
{
background-color: mediumpurple;
}
.one:hover
{
background-color: papayawhip;
}
.two:hover
{
background-color:palegreen;
}
.three:hover
{
background-color:hotpink;
}
.four:hover
{
background-color:deepskyblue;
}
</style>
</head>
<body style="text-align: center;">
<a class="one" href="#">导航1</a>
<a class="two" href="#">导航2</a>
<a class="three" href="#">导航3</a>
<a class="four" href="#">导航4</a>
</body>
</html>