伪类选择器我们以超链接为例。
当给某文字设置了超链接后，可以看到访问该网站之前和访问该网站过后，其颜色是不一样的。这个时候如果我们要自主设计颜色，可以通过伪类选择器进行。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 a:link{
8 color:green;
9 }
10 a:visited{
11 color:burlywood;
12 }
13 a:hover{
14 font-size: 30px;
15 color:red;
16 }
17 a:active{
18 color:yellow;
19 font-size: 30px;
20 }
21 </style>
22 </head>
23 <body>
24 <!-- 1.正常状态2.鼠标移上3.鼠标按上不抬起4.被打开过 -->
25 <a href="http://www.baidu.com">Go To 百度</a>
26 </body>
27 </html>
注意style里面的顺序不能发生改变！
其他伪类选择器：
直接看代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 a:link{
8 color:green;
9 }
10 a:visited{
11 color:burlywood;
12 }
13 a:hover{
14 font-size: 30px;
15 color:red;
16 }
17 a:active{
18 color:yellow;
19 font-size: 30px;
20 }
21 .one:link{ /* 结合类控制伪类：只控制这个属性 */
22 color:blue;
23 }
24 img:hover{
25 width:300px;
26 }
27 div:first-child{ /* 对div应用,要求div是body的第一个孩子!所以只对"嘿嘿嘿不错！"有效. */
28 font-size: 40px;
29 }
30 /* 总结:是对这个元素使用,同时也要求该元素必须是其父亲的第一个孩子 */
31 span:first-child{
32 font-size:35px;
33 color:blueviolet;
34 } /* 这里可自己观察颜色 */
35 </style>
36 </head>
37 <body>
38 <div>嘿嘿嘿不错！</div>
39 <!-- 1.正常状态2.鼠标移上3.鼠标按上不抬起4.被打开过 -->
40 <a href="http://www.baidu.com">Go To 百度</a>
41 <a href="https://www.bilibili.com/" class="one">BiliBili!</a>
42 <img src="测试图片.jpeg" />
43 <div>Oh?</div>
44 <div>
45 <span>我是第一个孩子<span>我是第一个孙子</span></span>
46 <span>我是第二个孩子</span>
47 </div>
48 </body>
49 </html>
原文：https://www.cnblogs.com/EvanTheGreat/p/14380772.html