原创作品，未经许可不得转载
默认情况下，超链接是蓝色的字体颜色：
<body>
<a href="http://www.var365.net" target="_blank">这是一个超链接</a>
</body>
在之前的课程中，我们学到了可以使用给<a>元素设置color样式来改变它的字体颜色：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
a{
color: red;
}
</style>
</head>
<body>
<a href="http://www.var365.net" target="_blank">这是一个超链接</a>
</body>
</html>
如果你在平时上网浏览时有留意的话，你应该会发现，很多网站的超链接在当用户将鼠标移动到它上面时，会改变字体颜色。这是一种常见的优化用户体验的方式。
要实现这样的体验非常简单，只需给<a>元素设置:hover伪类选择器样式即可。
先来看一个示例：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
a{
color: red;
}
a:hover{
color: yellow;
}
</style>
</head>
<body>
<a href="http://www.var365.net" target="_blank">这是一个超链接</a>
</body>
</html>
运行上方的示例，将鼠标移动到网页中的超链接上看看效果。
是不是很简单？
这里涉及到了一个新的概念：伪类选择器。
在前面的课程中已经学过，在<style>元素内设置样式时，{}前面的是选择器，如果这里写的是元素名（例如a），表示为网页中的所有这类<a>元素设置样式。这种写法的选择器叫做元素选择器。
“伪类选择器”是在选择器的后面加上一个冒号（:），然后再加上一个固定的单词（比如hover）。
作为初学者，现在去理解“伪类选择器”的字面意思可能有点困难，可以先不用理会，现在你只需记住它的语法。
:hover设置的是：当鼠标移动到这个元素时，元素的样式。
所以，a:hover选择器设置的是：当鼠标移动到页面中的<a>元素上时，<a>元素的样式。