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

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

在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. 调整段落首尾间距

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

秘塔写作猫

秘塔写作猫是一个集AI写作、校对、润色、配图等为一体的创作平台

127

查看详情

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

2. 列表项首尾样式处理

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

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

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

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

nav a:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
nav 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+ 支持，移动端基本无问题。

基本上就这些。掌握 :first-of-type 和 :last-of-type 的组合使用，能让你在不修改HTML结构的前提下，灵活控制内容区块的视觉呈现，提升页面细节表现力。

以上就是CSS伪类:first-of-type与:last-of-type组合如何使用_使用:first-of-type last-of-type调整首尾样式的详细内容，更多请关注php中文网其它相关文章！