超链接伪类
下面有四种状态的链接：
| 伪类 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
在使用这四个伪类时，一定要按照“link、visited、hover、active”的顺序进行，不然可能无法正常显示这4种样式。
一般我们记住一个就够了：a:hover。a:link直接在a标签中修改样式就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接伪类</title>
<style type="text/css">
a{color: red;text-decoration: none;}
a:hover{color:cadetblue;text-decoration: underline;}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度首页</a>
</body>
</html>显示效果：
hover的深入使用
hover不仅可以使用在标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接伪类</title>
<style type="text/css">
/* a{color: red;text-decoration: none;} */
/* a:hover{color:cadetblue;text-decoration: underline;} */
img{width: 350px;height:150px;}
img:hover{border:aqua solid 10px; }
</style>
</head>
<body>
<!-- <a href="https://www.baidu.com">百度首页</a> -->
<img src="./HTML.png" alt="html">
</body>
</html>显示效果：
鼠标没有经过时：
鼠标经过时：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。