:first-of-type与:last-of-type组合使用详解

:first-of-type 和 :last-of-type 是CSS中强大而实用的结构性伪类，它们能精准定位父元素内同类型子元素的第一个和最后一个实例，无需添加冗余类名即可实现首尾样式定制——无论是清除段落首尾多余间距、为列表首项添加图标或末项加粗，还是给导航链接统一设置左右圆角，都能轻松应对；其核心在于按元素类型独立判断而非整体顺序，兼顾语义清晰与兼容稳健（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. 调整段落首尾间距

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

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结构的前提下，灵活控制内容区块的视觉呈现，提升页面细节表现力。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《:first-of-type与:last-of-type组合使用详解》文章吧，也可关注golang学习网公众号了解相关技术文章。