链接的几种状态
链接的不同状态都可以不同的方式显示,这些状态包括:活动状态(鼠标点击时的状态),已被访问状态,未被访问状态,和鼠标悬停状态。
超链接的伪类
- :link 未访问的链接
- :visted 访问过的链接,但由于隐私的原因,:visted这个超链接伪类只能修改访问过的链接的颜色,而不能修改大小等。
注:以上这两个伪类选择器只有超链接才有,即a标签独有。
两个其他的伪类选择器
-
:hover 表示鼠标移入的状态
-
:active表示鼠标正在点击的状态
注:这两个伪类选择器对所有标签有效。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*未访问过的链接设置为红色 */
a:link{
color: red;
}
/* 访问过的链接设置为绿色 */
a:visited{
color: green;
}
/* 鼠标移入当前超链接时变蓝,且变大 */
a:hover{
color: blue;
font-size: larger;
}
/* 鼠标点击时变黄且变小 */
a:active{
color: yellow;
font-size: small;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">访问过的链接</a>
<br><br>
<a href="https:www.baidu123.com">未访问过的链接</a>
</body>
</html>