CSS伪类:first-of-type与:last-of-type组合如何使用_使用:first-of-type last-of-type调整首尾样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS伪类:first-of-type与:last-of-type组合如何使用_使用:first-of-type last-of-type调整首尾样式

2025-11-22

浏览次数：次

返回列表

:first-of-type和:last-of-type用于选择父元素内同类标签的第一个和最后一个元素，可精准设置首尾元素样式。例如去除首段上边距、末段下边距，为列表首项添加图标、末项加粗，或为导航首个链接设左圆角、末个设右圆角。二者基于元素类型匹配，非整体子元素顺序，若某类型仅一个元素，则两者均匹配该元素，兼容性良好，IE9+及现代浏览器支持。

css伪类:first-of-type与:last-of-type组合如何使用_使用:first-of-type last-of-type调整首尾样式

在CSS中，:first-of-type 和 :last-of-type 是非常实用的结构性伪类，它们可以根据元素在父容器中的位置来选择第一个或最后一个同类标签元素。合理组合使用这两个伪类，可以精准地为列表、段落、标题等结构中的首尾元素设置特殊样式，无需额外添加类名。

理解 :first-of-type 与 :last-of-type 的作用

这两个伪类的选择逻辑基于“元素类型”和“兄弟节点关系”：

:first-of-type 选择父元素下同类型子元素中的第一个。例如，多个 p 元素中第一个 p 会被选中。
:last-of-type 选择父元素下同类型子元素中的最后一个。

注意：它们不是按顺序选择第一个或最后一个子元素，而是按元素类型分别判断。比如在一个 div 中有 p、h2、p，那么两个 p 中的第一个是 :first-of-type，第二个 p 才是 :last-of-type（针对 p 类型）。

常见使用场景示例

以下是一些典型用法，展示如何通过这两个伪类调整首尾元素的样式：

1. 调整段落首尾间距

在文章内容中，通常希望去掉第一个段落的上边距，最后一个段落的下边距，避免留白过多。

article p:first-of-type {
  margin-top: 0;
}
article p:last-of-type {
  margin-bottom: 0;
}

2. 列表项首尾样式处理

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

对于无序列表，可能需要给第一项加顶部边框，最后一项加底部边框，或去除默认符号。

ul li:first-of-type::before {
  content: "?";
  margin-right: 5px;
}
ul li:last-of-type {
  font-weight: bold;
}

3. 导航菜单中首尾按钮特殊样式

在水平导航中，为第一个和最后一个按钮添加圆角：

n* a:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
n* a:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

注意事项与兼容性

使用时需注意以下几点，避免误选或样式失效：

选择的是“同类型元素”的首尾，不是所有子元素的首尾。如果父元素第一个子元素是 h2，而你想选第一个 p，:first-of-type 仍会跳过 h2 去找第一个 p。
当只有一个该类型元素时，:first-of-type 与 :last-of-type 同时匹配它。
支持现代浏览器，IE9+ 支持，移动端基本无问题。