写给自己：
想知道怎么回事，把代码放到编译工具中，仔细观察注释位置，并且运行
<!DOCTYPE html>
<html lang="zh">
<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">
.link{
font-size: 30px;
text-decoration: none;
color: #00FFFF;
}
.link:hover{/* hover伪类代表鼠标悬停时的一种状态 */
color: blueviolet;
font-size: 90px;
font-weight: bold;
font-style: italic;
}
.box01,.box02{
font-size: 20px;
}
.box01:before{/* before伪元素可以在类选择器管辖范围内添加某些内容*/
content: "（brfore起的作用+前面的文字）";
color: #8A2BE2;
}
.box02:after{
content: "(after起的作用+后面的文字）";
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度</a>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
</body>
</html>
