:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。如果父元素的第一个元素不是寻找的元素的话，就会不起作用。

场景举例：

<!--内容部分-->
<div class="fruits">
<h3>热销水果</h3>
<p>鲜红透亮的樱桃</p>
<p>晶莹剔透的提子</p>
<p>脆甜多汁的西瓜</p>
</div>

CSS：

/* 样式部分 */
.fruits{width:180px;padding: 20px;text-align: center;}
.fruits h3{font-size: 18px;color: limegreen;padding-bottom: 10px;}
.fruits p{padding:10px 0;border-top: 1px solid #cccccc;}
.fruits p:first-child{border-top: none;}

最后效果：

说明：可以看出最后一行样式没有起效果，原因就是P元素前面有其他元素(H3)。

解决方法一：因为p元素后面没有其他元素了，可以将 first-child 选择器改为 last-child 选择器（同时要将border-bottom改为border-bottom）

解决方法二：用一个div标签将所有的p元素包起来。如下：

<!--内容部分-->
<div class="fruits">
<h3>热销水果</h3>
<div>
<p>鲜红透亮的樱桃</p>
<p>晶莹剔透的提子</p>
<p>脆甜多汁的西瓜</p>
</div>
</div>

最后得到我们想要的效果，如下：