: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>
最后得到我们想要的效果，如下：
更多CSS相关知识，可访问 CSS教程 ！!
以上就是css first-child不管用是什么原因？的详细内容，更多请关注易知道|edz.cc其它相关文章！
