1、如图所示，我们新建一个记事本，并将记事本的名字改为“CSS的伪类使用（9）”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2、如图所示，我们鼠标在文档图标上面右击，在弹出的下拉菜单中，我们依次选择“打开方式”，之后选择“Sublime Text”打开进行编辑。
3、如图所示，我们编写一个html5的声明标签— <!DOCTYPE html>, 以使浏览器能认识到我们的文档是一个html5的文件，这样就可以快速的正确解读，以提高浏览的体验。再写一个<html>的标签用以包含网页的主体。
4、如图所示，我们写一个<title>的标签，将网页的题目写入进去，让网页的标题显示为“CSS的伪类使用（9）”，并且我们用<meta>标签设置字符的编码格式为：UTF-8，以使浏览器能够正确的显示我们的网页。（UTF-8为Unicode编码的一个字符集几乎涵盖了世界上所有的字符，因此可以编码几乎所有文字，所以大胆使用吧！）。
5、如图所示，我们写一个<body>标签，用来包含网页的主体部分,并且我们在写一个div标签里面包含一段文字，用来展示伪类first-letter的效果，就是可以给第一个字符设置样式（first是第一的意思，而letter是字母的意思，大概就是第一个字母的意思。）。
6、如图所示，我们在准备写一个h2的标签，来展示给第一行设置样式的效果。
7、如图所示，我们为了展示的确只给第一行设置样式，所以我们写了许多的文字，并且还写了<br />标签进行换行，以使其展示效果更清楚。
8、如图所示，我们写上p标签，用来展示before伪类，可以在p标签前面添加文字，以及after伪类可以在p标签后面添加伪类的效果。
9、如图所示，我们写上style标签用来包含设置的样式，并且声明这个标签里面的内容类型为css。
10、如图所示，我们用div:first-letter｛｝，就可以设置div标签里面第一个字符的样式了，我们设置其文字颜色为红色。
11、如图所示，我们用h2:first-line｛｝，就可以设置h2里面内容的第一行的样式了，我们设置其文字颜色为粉色。
12、如图所示，我们用p:before｛｝，就可以在里面添加文字和设置样式了，其中用content添加文字。（content中文意思为内容的意思。）
13、如图所示，我们用p:after｛｝，就可以在里面添加文字和设置样式了，其中用content添加文字和设置文字颜色为绿色。（伪类选择器的格式一般为：标签：伪类｛｝。）
14、如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”。
15、如图所示，我们看到我们用伪类选择器，设置了div标签里面的文字，第一个文字为红色了，依次还有h2里面的第一行文字也变为了我们设置的粉色，而其他行没有变色，接下来我们用before添加的文字，以及after添加的文字加其设置的文字颜色，也都出现了。
16、如图所示，这是本dome的源码供大家参考哦！（dome就是案例的意思啦！）<!--<!DOCTYPE html>标签声明这是一个html5的文档--><!DOCTYPE html><!--用<html>标签包含html5文档的主体--><html><!--用head标签包含html文档的头部--><head><!--用title标签设置网页的标题--><title>CSS的伪类使用（9）</title><!--用meta标签设置文档的编码格式为UTF-8,以使浏览器正确解码文档--><meta charset="utf-8"><!--用style标签设置文档的样式，并声明其为css类型--><style type="text/css">/*选择div标签中第一个字符并设置文字颜色为红色*/div:first-letter{color: red;}/*选择h2标签中第一个行并设置文字颜色为粉色*/h2:first-line{color:pink;}/*p标签前面添加文字*/p:before{content: "我会出现在前面";}/*p标签后面添加文字*/p:after{content: "我会出现在后面";color:green ;}</style></head><!--用body标签包含html文档主体部分--><body><!--用div标签包含一些文字，用来展示给第一个字符设置颜色的效果--><div>我是div标签里面的内容，用来展示伪类first-letter的效果。</div><!--用h2标签包含一些文字，用来展示给第一行设置颜色的效果--><h2>在编写的网页中插入图片，可以使浏览网页的用户得到更好的体验效果，那么如何在网页中插入一个图片那，本大神就来给大家详细讲解下，在网页中如何插入一张图片。<br />用来展示给第一行设置颜色的效果</h2><!--用p标签包含一些文字，用来展示往p标签前面添加文字使用伪类before和后面添加文字使用伪类after的效果--><p>我是一个p标签，用来展示往p标签前面添加文字使用伪类before和后面添加文字使用伪类after的效果</p></body></html>