CSS首尾元素样式设置方法

本文深入讲解了CSS中:first-child和:last-child伪类选择器的核心用法与实战技巧，帮助开发者精准控制父容器内首尾子元素的样式——无论是去除多余边框、消除首尾间距，还是突出显示关键内容，都能无需添加冗余class、适配动态列表，并兼顾IE9+及所有现代浏览器；文章通过清晰语法说明、典型场景示例和易错点提醒，让读者快速掌握这一简洁高效、提升代码可维护性的必备CSS技能。

在网页开发中，经常需要对列表或容器中的第一个和最后一个子元素单独设置样式。CSS 提供了 :first-child 和 :last-child 伪类选择器，让我们可以精准地选中首尾元素，无需额外添加 class 或 id。

什么是 :first-child 和 :last-child？

:first-child 用于选中父元素中的第一个子元素，:last-child 则选中最后一个子元素。它们根据元素在父容器中的位置进行匹配，非常适用于动态内容或未知数量的列表项。

示例场景：

比如有一个无序列表，你想让第一个项目左边距更大，最后一个项目右边不加边距，就可以用这两个选择器轻松实现。

基本语法与使用方法

这两个伪类直接附加在目标元素的选择器后，写法如下：

• element:first-child —— 选中作为第一个子元素的 element
• element:last-child —— 选中作为最后一个子元素的 element

例如：

  li:first-child {
    color: red;
  }
  li:last-child {
    color: blue;
  }

上面代码会让列表中第一个 li 文字变红，最后一个变蓝。

常见应用场景

这些选择器特别适合以下几种情况：

• 去除首尾间距：在水平导航栏中，给每个 item 加右边距，但最后一个不需要。
• 首项特殊标识：如新闻列表中突出显示第一条。
• 边框控制：避免相邻元素之间的重复边框，比如只在第一个加顶部边框，最后一个加底部边框。

实际例子：清除列表最后一项的下边框

  .list-item {
    border-bottom: 1px solid #ddd;
  }
  .list-item:last-child {
    border-bottom: none;
  }

注意事项与兼容性

使用时要注意几点：

• 必须是同级子元素中的第一个或最后一个，中间不能有其他标签干扰结构。
• 如果第一个子元素不是目标类型，:first-child 不会匹配下一个符合条件的元素。
• 现代浏览器都支持这两个伪类，包括 IE9+，移动端完全可用。

比如下面这种情况不会生效：

  <ul>
    <p>说明文字</p>
    <li>项目1</li>
    <li>项目2</li>
  </ul>

此时 li:first-child 不会匹配“项目1”，因为它不是父元素的第一个子元素。

基本上就这些。掌握 :first-child 和 :last-child 能让你更灵活地控制页面布局，减少冗余 class，写出更简洁的 CSS。

到这里，我们也就讲完了《CSS首尾元素样式设置方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！