:first-child与:last-child区别详解

` 元素加粗显示。理解这两个选择器的关键在于它们不仅需要元素类型匹配，还需要元素位于父元素中的相应位置。本文将深入解析 `:first-child` 和 `:last-child` 的区别、用法及注意事项，助你轻松掌握 CSS 结构性伪类选择器的应用，提升网页样式的精准控制能力。

:first-child选中父元素的第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个子元素，如p:last-child使末尾p加粗；二者均需元素类型匹配且位于对应位置。

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

1. :first-child 选择器

该选择器匹配其父元素中的第一个子元素，且该元素必须符合指定的类型。

div:first-child 会选中作为第一个子元素的 div 元素。

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

示例 HTML：

  
• 第一项

  
• 第二项

  
• 第三项

CSS：

li:first-child { color: red; }

结果：第一项文字变为红色。

2. :last-child 选择器

该选择器匹配其父元素中的最后一个子元素，同样要求该元素符合指定的类型。

p:last-child 会选中作为最后一个子元素的 p 元素。

如果最后一个子元素不是 p，则不生效。

示例 HTML：

CSS：

p:last-child { font-weight: bold; }

结果：最后一个段落加粗显示。

关键区别总结

• :first-child 针对父元素下的第一个子元素
• :last-child 针对父元素下的最后一个子元素
• 两者都要求目标元素既是第一个（或最后一个）子元素，又符合前面的标签或类名条件
• 若顺序或结构改变，匹配结果也会变化

基本上就这些，使用时注意元素在父容器中的实际位置即可。不复杂但容易忽略细节。

今天关于《:first-child与:last-child区别详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！