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;
}

效果图：

分析

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

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

总结

select:last-child: 选择父元素的最后一个子元素，且同时满足select条件的。两者缺一不可！

本文给出的例子相对简单，只分析了:last-child, :first-child也是同样的。希望大家自己多动手实践实践，或许能有不同的收获呢，加油↖(^ω^)↗（了解更多）

如果你有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~