<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器演示</title>
<style type="text/css">
/* a在未被访问前的样式 */
a:link{color: gray; text-decoration: none;}
/* 被访问后的样式 */
a:visited{color: blue; text-decoration: none;}
/* 悬停时的样式 */
a:hover{color: red; text-decoration: underline;}
/* 被用户激活时的样式 */
a:active{color: yellow; text-decoration: underline;}
/* 作用于第一行 */
p:first-letter{font-weight: bold; font-family: "黑体";}
p:first-line{font-size: 32px;}
</style>
</head>
<body>
<p>在支持CSS的浏览器中，链接的不同状态都可以以不同的方式显示，这些状态包括：活动状态，已被访问的状态，未被访问的状态，和鼠标悬停状态
<br>
注意：a:hover 必须置于a:link 和 a:visited 之后，才是有效的。a:active必须置于 a:hover之后，才是有效的。
</p>
<a href="https://www.baidu.com/index.php">搜索一下：百度</a>
</body>
</html>
