:first-child与:last-child的区别是什么？

在CSS样式表中，`:first-child`和`:last-child`是两个常用的伪类选择器，用于精准定位父元素下的特定子元素。`:first-child`选择器针对的是父元素下的**第一个**子元素，而`:last-child`则针对**最后一个**子元素。本文深入解析这两个选择器的区别与用法，通过实例代码展示如何利用它们实现特定的页面样式效果。理解`:first-child`和`:last-child`的关键在于明确它们选择的是**位置**，而非元素类型顺序。只有当目标元素既满足选择器条件，又位于父元素的第一个或最后一个位置时，样式才会生效。掌握这两个选择器，能有效提升CSS代码的简洁性和可维护性，优化网页布局。

:first-child选中父元素下第一个子元素，:last-child选中最后一个子元素，二者均要求该元素满足选择器条件且位于对应位置，如p:first-child仅当p为首个子元素时生效，p:last-child同理，关键区别在于目标子元素的位置不同。

: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学习网公众号了解相关技术文章。