first-child伪类选择器没有效果(不起作用)

我们在开发时，经常会使用到结构性伪类选择器，如 first-child（选择第一个子元素），但有时候并没有效果怎么办？

这时候你可以检查一下该元素是否有其他兄弟元素。因为当父元素的第一个子元素类型和该元素不同时，会失效。

场景举例：

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

/* 样式部分 */
.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>

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

希望能帮助到大家！