网页中伪类选择器的使用（8）
1、1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中伪类选择器
的使用（8）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网
页文件。
2、2.如图所示，我们在这个html文档的图标上鼠标右击，在弹出的下拉列表菜单中
，我们依次选择“打开方式”，之后选择用“Sublime Text”这个程序打开这个
html文件进行编辑。
3、3.如图所示，我们编写一个html5的声明标签— <!DOCTYPE html>, 以使浏览器
能认识到我们的文档是一个html5的文件，这样就可以快速的正确解读，以提高
浏览的体验。再写一个<html>的标签用以包含网页的主体。
4、4.如图所示，我们写上<head>标签用来包含html主体部分，再写一个<title>的
标签，将网页的题目写入进去，让网页的标题显示为“网页中伪类选择器的使用
（8）”然后用<meta>标签设置字符的编码格式为：UTF-8，以使浏览器能够正确
的显示我们的网页。（UTF-8为Unicode编码的一个字符集几乎涵盖了世界上所有
的字符，因此可以编码几乎所有文字，所以大胆使用吧！）。
5、5.如图所示，我们用<head>标签包含html文档的主体部分，里面再写上<a>标签
用来写入一个百度的链接，特别声明百度是我们访问过的链接哦！（一般访问过
的链接都默认显示为紫色。）我们接下来就设置自己喜欢的颜色哦！
6、6.如图所示，我们用<br />标签进行一下换行，让显示更明确一些，然后我们再
写一个<a>标签这个链接我们随便写的，没有访问过的链接哦！（一般没有访问
过的链接，默认显示为蓝色哦！）我们接下来就设置自己喜欢的颜色哦！
7、7.如图所示，我们写一个<style>标签用来包含css样式的设置，并声明其为css
类型。
8、8.如图所示，我们我们写一个a:link｛｝，这表示我们选中<a>标签的链接文字
，并且设置其链接在没有被访问过时的文字等！我们就设置没有访问过的链接文
字颜色为绿色（link就是中文链接的意思，伪类选择器的用法格式为：标签+：+
需要设置的某些状态+大括号，大括号内可以设置样式。）。
9、9.如图所示，我们再写一个a:visited｛｝，这表示设置访问过的链接的状态，
我们设置其访问过后的链接的文字颜色为红色（visited中文意思就是参观过的
意思哦！）。
10、10.如图所示，我们再写一个a:hove｛｝，这表示鼠标指针移到链接上时的状态
，我们设置鼠标指针移上这个链接时，其链接文字的颜色为红色（hover中文意
思就是盘旋或者翱翔的意思）。
11、11.如图所示，我们再写一个a:active{},这表示鼠标按住链接时的一种状态，我
们设置鼠标按住链接时，链接文字的颜色显示为黑色（active中文意思为活动的
意思）。
12、12.如图所示，我们鼠标右击在弹出的下拉列表菜单中我们选择“在浏览器中1打
开”打开这一项。
13、13.如图所示，我们看到访问过的链接为我们设置的红色，而没有访问过的链接
为我们设置的绿色。
14、14.如图所示，我们看到鼠标移上时，链接的颜色为蓝色（这里需要截图的原因
，所以大家没有看到鼠标在链接上面，特此给大家说明下，希望大家能够理解这
个链接上为什么没有鼠标指针移上，还呈现蓝色的原因哈！）。
15、15.如图所示，我们当我们鼠标按住链接时，我们看到链接的文字为黑色（也是
上面由于截图的原因大家没有看到鼠标指针哦！）。
16、16.如图所示，下面是这个html5的源码，复制保存在记事本中，改文件名txt为
html，即可快速浏览网页哦！
<!--声明文档是一个html5的文档-->
<!DOCTYPE html>
<!--用<html>标签包含网页的主体-->
<html>
<!--用<head>标签包含html5文档的头部-->
<head>
<!--用<title>标签包含网页的标题-->
<title>网页中伪类选择器的使用（8）</title>
<!--设置网页的编码方式为UTF-8-->
<meta charset="utf-8">
<!--用<style>标签设置网页中的样式，并且声明其类型为css
类型-->
<style type="text/css">
/* 正常链接的状态设置，就是没有访问过的链接状
态设置*/
a:link{
/*设置正常或者没有访问过的链接为绿色—
——green*/
color: green;
}
/* 访问过链接的状态设置，就是访问过的链接状态
设置*/
a:visited{
/*设置访问过的链接为红色———red*/
color:red;
}
/*可以设置鼠标划过的时候的状态*/
a:hover{
/*设置鼠标划过链接时的颜色为蓝色———
blue*/
color:blue;
}
/*可以设置鼠标按住时的状态*/
a:active{
/*设置鼠标按住的链接颜色为黑色———
black*/
color:black;
}
</style>
</head>
<!--<body>标签用来包含html5文档的主体部分-->
<body>
<!--这是一个访问过的超链接-->
<a href="http://www.baidu.com">我是被访问过的超链接
</a>
<!--<br>标签可以换行-->
<br />
<!--这是一个没有访问过的超链接-->
<a href="http://www.hao123hui.com">我是没有被访问过的
超链接</a>
</body>
</html>