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