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

理解CSS伪类选择器:first-child和:last-child至关重要。本文深入解析了这两个常用选择器的区别与用法，助你精准控制网页元素样式。:first-child用于选取父元素下的第一个子元素，例如`li:first-child`可将列表首项文字设为红色；而:last-child则选取最后一个子元素，如`li:last-child`可加粗列表末项。务必注意，这两个伪类依赖于元素在父容器中的实际位置，而非元素类型。若首/尾元素类型不匹配，选择器将失效。掌握这些细节，就能在列表、导航栏等场景中灵活应用:first-child和:last-child，实现首尾样式的精细化控制。

:first-child选中父元素下第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个，如li:last-child加粗末项；二者依赖实际结构位置，若首/尾元素不匹配则无效，常用于列表、导航等首尾样式控制。

:first-child 和 :last-child 是 CSS 中常用的结构伪类，用于选中父元素下的第一个或最后一个子元素。它们的使用方式相似，但作用位置相反。

1. :first-child 用法

这个伪类匹配其父元素中的第一个子元素，前提是该元素满足选择器条件。

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

  li:first-child {
    color: red;
  }

结果：只有“第一项”文字变为红色，因为它是 ul 下的第一个 li 元素。

2. :last-child 用法

这个伪类匹配其父元素中的最后一个子元素，同样需满足选择器条件。

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

结果：“第三项”加粗显示，因为它是 ul 中最后一个 li。

3. 注意事项与常见误区

这两个伪类依赖于元素在父容器中的实际位置，而不是类型。以下几点容易出错：

• 如果第一个子元素不是目标标签，比如第一个是 p 而不是 li，那么 li:first-child 就不会生效。
• 它们只看兄弟节点顺序，不关心类名或属性。
• 空格和文本节点一般不影响，但结构必须正确。

4. 实际应用场景

常用于列表、导航栏、表单控件等需要首尾特殊样式的场景。

• 给列表第一项添加上边距或去掉上边框
• 为最后一项按钮设置不同的背景色
• 轮播图中高亮首尾幻灯片

基本上就这些，掌握好结构关系就能准确使用。不复杂但容易忽略细节。

本篇关于《:first-child与:last-child区别详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！