首页 > 文章 > 前端

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

时间：2025-10-10 08:27:34 467浏览收藏

从现在开始，努力学习吧！本文《:first-child和:last-child是CSS中常用的伪类选择器，它们用于选择特定的子元素，但作用对象不同。以下是它们的区别：1. :first-child 伪类选择器:first-child 用于选择某个父元素的第一个子元素，无论该子元素是什么类型（可以是标签、文本节点等）。示例：

第一个列表项
第二个列表项
第三个列表项

li:first-child { color: red; }在这个例子中，第一个

元素会被选中并变成红色。注意：:first-child 是基于位置来选择的，而不是基于元素类型。2. :last-child 伪类选择器:last-child 用于选择某个父元素的最后一个子元素，同样不考虑元素类型。示例：

第一个列表项
第二个列表项
第三个列表项

li:last-child { color: blue; }在这个例子中，最后一个

元素会被选中并变成蓝色。区别总结》

主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

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

css伪类选择器:first-child和:last-child区别

: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：

段落1

段落2

段落3

CSS：

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

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

关键区别总结

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

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

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