:first-child 与 :last-child 的区别在于，前者匹配的是某个父元素中的第一个子元素，而后者匹配的是最后一个子元素。

:first-child 和 :last-child 是 CSS 中一对关键的结构性伪类选择器，看似相似却定位截然相反——前者精准捕获父元素中“排在最前且符合条件”的子元素，后者则锁定“排在最后且符合条件”的那个；它们不看元素类型顺序，只认真实 DOM 位置，一旦首个或末尾子元素不匹配指定标签（如 p），样式便失效，因此实际使用中务必关注 HTML 结构的严谨性，稍有偏差就可能导致预期样式“消失”。

:first-child 和 :last-child 是 CSS 中的两个结构性伪类选择器，它们用于选中父元素下的第一个或最后一个子元素。虽然名称相似，但作用位置相反。

1. :first-child 选择器

• p:first-child 会选中作为其父容器中第一个子元素的

  标签。

• 如果第一个子元素不是 p，则不会被选中。

示例：

<div>
  <p>我是第一个 p</p>
  <p>我是第二个 p</p>
</div>

<style>
  p:first-child {
    color: red;
  }
</style>

2. :last-child 选择器

• p:last-child 会选中作为其父容器中最后一个子元素的

  标签。

• 如果最后一个子元素不是 p，则不会被选中。

示例：

<div>
  <p>第一个段落</p>
  <p>最后一个段落</p>
</div>

<style>
  p:last-child {
    font-weight: bold;
  }
</style>

关键区别总结

• :first-child 针对的是“第一个”子元素的位置。
• :last-child 针对的是“最后一个”子元素的位置。
• 两者都依赖于元素在父容器中的实际位置，而不是类型顺序。
• 如果目标元素不在对应位置，即使存在也不会被选中。

基本上就这些。使用时注意结构布局是否符合预期，避免因前后标签干扰导致样式未生效。

到这里，我们也就讲完了《:first-child 与 :last-child 的区别在于，前者匹配的是某个父元素中的第一个子元素，而后者匹配的是最后一个子元素。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！