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

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

立即学习“前端免费学习笔记（深入）”；

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

CSS：

li:first-child { color: red; }

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

2. :last-child 选择器

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

稿定AI社区

在线AI创意灵感社区

60

查看详情

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

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

示例 HTML：

立即学习“前端免费学习笔记（深入）”；

<div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>

CSS：

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

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

关键区别总结

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

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

以上就是css伪类选择器:first-child和:last-child区别的详细内容，更多请关注php中文网其它相关文章！