css first-child不管用是什么原因?

我们在开发时,经常会使用到结构性伪类选择器,如 first-child(选择第一个子元素),但有时候并没有效果,这是什么原因?下面给大家介绍一下,希望对大家有所帮助。

: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其它相关文章!

推荐阅读