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