子元素的伪类，可以让我们在没有设置class和id等属性的时候，也可以选择自己需要选择的元素，比如在一堆p元素中选择第一个p可以用伪类：first-child，或者最后一个伪类：last-child，当然还可以随意选择第n个，使用：nth-child(n)，这就使得我们选择更灵活了，那下面本大神就来为大家讲解子元素的伪类使用啦！
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“CSS子元素的伪类使用（11）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们在文件图标上鼠标右击，在弹出的下拉列表菜单中，我们依次选择“打开”，之后选择“打开方式（H）”，再选择“Sublime Text”这个程序。
3
3.如图所示，我们写一个标签用来声明这是一个html5的文档，在写一个,标签用来包含html文档的主主体部分。
4标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。</p></div><div class="listcon"><span>5</span><p>5.如图所示，我们写上html的主体用<body>标签包含，再写上div标签，用来包含下面的一些p标签，也好展示父元素和子元素的关系，以便讲解子元素的伪类使用。</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们写上第一个p标签，用来展示伪类：first-child的效果，first-child意思就是第一个孩子的意思。</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们再写上第二个和第三个p标签，用来展示:last-child的效果，我们在这里之所写上3个p标签，就是为了让大家看清楚last-child之会选择最后一个p元素，而非第二个或那个，:last-child意思就是最后一个孩子的意思。</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们写上两个h1的标签，用来展示:nth-child（n）的效果，nth-child（n）的意思就是可以选择第几个孩子的意思，n是几就选第几个孩子，这里第一个h1标签是body的第2个子元素，而第二个h1是body的第3个子元素。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们写上h2用来展示:first-of-type的效果，这可以使我们选中body下特定类型的元素的第一个孩子。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们写上h2这个标签用来展示:last-of-type的效果，这可以使我们选中body下特定类型的元素的最后一个孩子。</p></div><div class="listcon"><span>11</span><p>11.如图所示，我们在a标签里面写上6个h3的标签，用来展示：nth-child（n）的效果，这样就可以指定n是几，就可以选择是哪一个孩子了。</p></div><div class="listcon"><span>12</span><p>12.如图所示，我们写上style标签，用来设置网页的样式，并且声明其为css类型，并且用div > p:first-child{}的形式来选中div中的第一个子元素，且为p标签的元素，并且设置其背景颜色为绿色-green。</p></div><div class="listcon"><span>13</span><p>13.如图所示，我们写上div > p:last-child{}的形式来选中div中的最后一个子元素，且为p标签的元素，并且设置其背景颜色为绿色-blue。</p></div><div class="listcon"><span>14</span><p>14.如图所示，我们写上body > h1:nth-child(3){}这样的形式，来选中body中第三个子元素，且是h1标签的元素，并将背景颜色设置为粉色-pink。</p></div><div class="listcon"><span>15</span><p>15.如图所示，我们写上body > h2:first-of-type{}这样的形式，来选中body中类型为h2类型的的标签，里面第一个子元素，并且设置其背景颜色为银色-silver。</p></div><div class="listcon"><span>16</span><p>16.如图所示，我们写上body > h2:last-of-type{}这样的形式，来选中body中类型为h2类型的的标签，里面最后一个子元素，并且设置其背景颜色为红色-red。</p></div><div class="listcon"><span>17</span><p>17.如图所示，我们写上a > h3:nth-child(even){}这样的形式用来设置a元素里面，标签为h3的偶数行的子元素，并且设置背景颜色为red-红色。</p></div><div class="listcon"><span>18</span><p>18..如图所示，我们写上a > h3:nth-child(odd){}这样的形式用来设置a元素里面，标签为h3的偶数行的子元素，并且设置背景颜色为purple-紫色。</p></div><div class="listcon"><span>19</span><p>19.如图所示，我们鼠标右击在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>20</span><p>20.如图所示，我们看到其设置的样式，是按照我们设置的颜色显示了。</p></div><div class="listcon"><span>21</span><p>21.如图所示，这是本案例的源码，以供大家参考哦！<!--用<!DOCTYPE html>标签声明这是一个html5网页--><!DOCTYPE html><!--html5网页用<html>标签包含网页的主体--><html><!-- 用head标签包含html文档的头部 --><head><!-- 用title标签包含网页的标题 --><title>CSS子元素的伪类使用（11）
4.如图所示，我们写一个
标签用来包含html文档的头部部分，写上我是第一个p标签
我是第二个p标签
我是第三个p标签
我是第一个h1标签，也是body的第2个子元素
我是第二个h1标签，也是body的第3个子元素
我是第一个h2标签
我是第二个h2标签
我是第一个h3标签，也是h3的第一行
我是第二个h3标签，也是h3的第二行
我是第三个h3标签，也是h3的第三行
我是第四个h3标签，也是h3的第四行
我是第五个h3标签，也是h3的第五行
我是第六个h3标签，也是h3的第六行
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。
下一篇：唱歌的技巧和方法