<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>/* 任何标签都可以设置鼠标悬停状态 */a:hover{color: brown;}.box:hover{color: green;}</style>
</head>
<body><a href="#">a标签，超链接</a><div class="box">div标签</div>
</body>
</html>
鼠标放在标签上，则该标签会变成选择器所对应设置好的颜色
拓展:伪类选择器在超链接上的四种状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>a:link{color: red;}a:visited{color: green;}a:hover{color: blue;}a:active{color: slateblue;}</style>
</head>
<body><a href="#">a标签，测试伪类选择器</a>
</body>
</html>
了解即可，实际应用中一般只会设置初始状态和鼠标悬停状态