首页 > 文章 > 前端

CSS中:first-child和:last-child用法详解

时间：2025-11-04 14:07:32 181浏览收藏

本篇文章给大家分享《CSS中:first-child和:last-child是伪类选择器，用于选择特定位置的子元素。以下是它们的使用方法：1. :first-child作用：选择某个父元素下的第一个子元素。语法：父元素 > 子元素:first-child { /* 样式 */ }示例：

ul > li:first-child { color: red; }效果：只有第一个

元素会变成红色。2. :last-child作用：选择某个父元素下的最后一个子元素。语法：父元素 > 子元素:last-child { /* 样式 */ }示例：

ul > li:last-child { color: blue; }效果：只有最后一个

元素会变成蓝色。注意事项：:first-child 和 :last-child 是基于》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

:first-child 和 :last-child 是基于子元素位置选择第一个或最后一个子项的伪类，用于精准控制列表、导航等布局的首尾样式。

css选择器:first-child与:last-child如何使用

:first-child 和 :last-child 是 CSS 中的伪类选择器，用于选中父元素下的第一个或最后一个子元素。它们在实际开发中非常实用，比如用于调整列表、导航栏或卡片布局的样式。

这个伪类匹配其父元素下的第一个子元素，前提是该元素符合选择器指定的类型。例如：

示例：

  li:first-child {
    color: red;
    margin-top: 0;
  }

这段代码会让列表中的第一个

文字变红，并重置其上边距。

与 :first-child 类似，:last-child 匹配父元素下的最后一个子元素。常用于处理排版间距，比如去掉最后一项的下边距。示例：

  p:last-child {
    margin-bottom: 0;
  }

如果一个容器最后一个子元素是段落，就会应用这条规则，避免多余空白。

这两个选择器依赖于元素在父容器中的位置，而不是类型数量。例如：

这些伪类在以下场景中特别有用：

比如：

  .menu li:first-child {
    border-radius: 8px 0 0 8px;
  }
  .menu li:last-child {
    border-radius: 0 8px 8px 0;
  }

基本上就这些。掌握 :first-child 和 :last-child 能让你更灵活地控制结构样式，关键是理解它们基于“位置”而非“类型”。

以上就是《CSS中:first-child和:last-child用法详解》的详细内容，更多关于的资料请关注golang学习网公众号！