:first-child选中父元素下第一个子元素，:last-child选中最后一个子元素，二者均要求该元素满足选择器条件且位于对应位置，如p:first-child仅当p为首个子元素时生效，p:last-child同理，关键区别在于目标子元素的位置不同。
:first-child 和 :last-child 是 CSS 中的两个结构性伪类选择器，它们用于选中父元素下的第一个或最后一个子元素。虽然名称相似，但作用位置相反。
1. :first-child 选择器
匹配父元素中的第一个子元素，前提是该元素满足选择器条件。 例如：- p:first-child 会选中作为其父容器中第一个子元素的 <p> 标签。
- 如果第一个子元素不是 p，则不会被选中。
示例：
<div>
<p>我是第一个 p</p>
<p>我是第二个 p</p>
</div>
<style>
p:first-child {
color: red;
}
</style>
结果：第一个 p 文字变红，因为它是父 div 的第一个子元素且是 p 标签。
2. :last-child 选择器
匹配父元素中的最后一个子元素，同样要求该元素符合条件。 例如：- p:last-child 会选中作为其父容器中最后一个子元素的 <p> 标签。
- 如果最后一个子元素不是 p，则不会被选中。
示例：
<div>
<p>第一个段落</p>
<p>最后一个段落</p>
</div>
<style>
p:last-child {
font-weight: bold;
}
</style>
结果：第二个 p 加粗，因为它是父元素的最后一个子元素。
关键区别总结
- :first-child 针对的是“第一个”子元素的位置。
- :last-child 针对的是“最后一个”子元素的位置。
- 两者都依赖于元素在父容器中的实际位置，而不是类型顺序。
- 如果目标元素不在对应位置，即使存在也不会被选中。
基本上就这些。使用时注意结构布局是否符合预期，避免因前后标签干扰导致样式未生效。
立即学习“前端免费学习笔记（深入）”；
