CSS伪类选择器的顺序介绍（16）
1、如图所示，我们新建一个记事本，并将记事本的名字改为“CSS伪类选择器的
顺序介绍（16）.html”，并回车键确定，以使文件转化为浏览器可以打开的
html网页文件。
2、如图所示，我们在这个程序对话框中，选择“Sublime Text”这个程序，并且
点击“确定”按钮打开，来编辑文本。
3、如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，
在写一个,<html>标签用来包含html文档的主主体部分。
4、如图所示，我们写一个<head>标签用来包含html文档的头部部分，
写上<title>标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方
式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
5、如图所示，我们写上html的主体用<body>标签包含，里面在写一个a标签，写
上一个被访问过的百度首页的链接。
6、如图所示，我们再写一个没有访问过得链接，来做演示哦！
7、如图所示，我们写上style标签用来包含我们设置的样式，并且声明其类型为
css类型，并且设置链接的：link的样式为pink-粉色（需要将正常链接设置样式
写在第一个位置）。
8、如图所示，我们为伪类：visited设置样式为黄色的文字。（访问过链接的文
字样式放在第二个位置）
9、如图所示，我们为伪类：hover设置样式为银色的文字。（鼠标指针划过链接
时的样式放在第三个位置）
10、如图所示，我们为伪类：active设置样式为绿色文字。（鼠标指针点击链接
时的样式放在第四个位置）
11、如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器
中打开”这一项。
12、如图所示，我们看到访问过得链接文字为我们设置的黄色和我们设置的没有
访问过的链接为红色，以及鼠标指针按下去时链接文字为绿色，还有鼠标移上去
的颜色为银色。
13、如图所示，这是本案例的源代码，以供大家参考哦！
<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 -->
<!DOCTYPE html>
<!-- 用<html>标签来包含网页的主体 -->
<html>
<!-- 用head标签包含html的头部部分 -->
<head>
<!-- 用title标签来写入网页的标题 -->
<title>CSS伪类选择器的顺序介绍（16）</title>
<!-- 用meta标签来设置文档的编码格式，以便浏览器能够正确解读网页 -->
<meta charset="utf-8">
<!-- 用style标签来包含网页中设置的样式，并声明其为css类型 -->
<style type="text/css">
/*这些伪类的优先级一样，执行按照这样的顺序，就可以了。*/
/*正常链接的颜色*/
a:link{
color: pink;
}
/*被访问过的链接的颜色*/
a:visited{
color: yellow;
}
/*鼠标指针移上链接的颜色*/
a:hover{
color: silver;
}
/*鼠标点击链接时的颜色*/
a:active{
color: green;
}
</style>
</head>
<!-- 用body标签包含html文档的主体部分 -->
<body>
<!-- 写一个已经访问过的链接,用来展示伪类选择器顺序的问题 -->
<a href="http://www.baidu.com/">我是被访问过的链接</a>
<!-- 写一个没有被访问过的链接,用来展示伪类选择器顺序的问题 -->
<a href="http://www.hui.com">我是一个没有被访问过的链接</a>
</body>
</html>