CSS: :last-child 与 :first-child的坑

前言
前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。


开始
:last-child: 指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述）


实践
HTML:



<div class="div1">
 <h1>这是标题</h1>
 <p>第一个段落。</p>
 <div class="div2">
 <p>p, 第二个段落。</p>
 <p>p, 第三个段落。</p>
 <p>p, 第四个段落。</p>
                <div class="div3">div, 我是最后的元素。</div>
 </div>
 <p>p, 第五个段落。</p>
</div>    
CSS:

.div1{
 border: solid 1px green;
}
.div2{
 border: solid 1px orange;
}
.div3{
 border: solid 1px blue;
}
p:last-child
{
 background: pink;
}
效果图：

图片：2018072318224363.png

分析在.div2中，最后一个元素为div标签，并未被:last-child选中。你可能会觉得，选择器中写的是p标签，没有选中div元素是理所当然的。

很多时候我们的需求是选中同一类名的最后一个元素，类似于.className:last-child。这时候你会发现如果父元素的最后一个元素不是.className的元素，它同样不会被选中。（可以将有同一类名的元素包裹一个父div已达到效果）



原文：https://blog.csdn.net/weixin_39015132/article/details/81172222