a标签在网页中存在着四种状态:未被访问、已被访问、鼠标悬停、鼠标长按。
a标签伪类选择器就是为了区分这四种状态而产生的。
格式为:
a:link——未被访问时的状态;
a:visited——已被访问时的状态;
a:hover——当鼠标悬停在a标签上时的状态;
a:active——当鼠标长按时的状态。
注意点:
伪类选择器可以同时出现,也可以单独出现;
同时出现,必须遵循link-visited-hover-active的顺序;
若未被访问与已访问状态相同,则可以使用a标签选择器来定义格式;
在企业开发中,伪类选择器一般写在标签选择器之后;
与盒子模型相关的属性(边框、边距、宽度、高度)写在标签选择器中,与文字、背景相关的写在伪类选择器中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
background-color: yellow;
}
a:active {
font-size: 30px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">超链接1</a>
<a href="http://www.baidu.com">超链接2</a>
</body>
</html>