:first-of-type和:last-of-type基于元素类型精准选中同标签首尾项，常用于去除列表边距、调整卡片样式；在混合内容中独立判断各标签的首位，结合兄弟选择器可控制分隔线，适配响应式布局，减少类名依赖，提升样式维护性。
在处理复杂布局时，CSS 的 :first-of-type 和 :last-of-type 伪类非常实用。它们能精准选中某一类型元素中的第一个或最后一个，帮助我们避免添加额外的类名或 JavaScript 控制样式。结合使用这两个伪类，可以高效实现对列表、卡片组、导航栏等结构的精细化控制。
精准控制同类型子元素的首尾项
当容器内包含多个相同标签（如多个
），:first-of-type 和 :last-of-type 能分别匹配其中第一个和最后一个出现的该类型元素。
常见应用场景包括：- 为段落列表中的首个段落添加更大的上边距
- 去除列表末尾元素的下边框或分割线
- 在卡片网格中调整首尾卡片的圆角或阴影
例如，以下样式可移除同一父容器中所有段落之间的首尾冗余边距：
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
在混合内容结构中实现智能样式隔离
在包含多种标签的容器中（比如 article 内有 h2、p、ul 等），:first-of-type 和 :last-of-type 依然按标签类型独立判断。这意味着每个标签类型的“第一”和“最后”都能被单独选中。
立即学习“前端免费学习笔记（深入）”；
假设你想让文章中第一个段落缩进，而最后一个段落不显示下边框：
article p:first-of-type {
text-indent: 2em;
}
article p:last-of-type {
border-bottom: none;
}
即使中间夹杂其他元素，只要 p 是同类标签中的首位或末位，样式依然生效。
与兄弟选择器配合实现过渡效果
结合相邻兄弟选择器（+）或通用兄弟选择器（~），可进一步控制首尾元素之间的连接样式。比如，在一组自定义提示框中，去掉首项的顶部边框，末项的底部边框，并统一中间项的分隔线：
.alert-box {
border-bottom: 1px solid #ddd;
}
.alert-box:first-of-type {
border-top: none;
}
.alert-box:last-of-type {
border-bottom: none;
}
.alert-box + .alert-box {
border-top: 1px solid #eee;
margin-top: -1px;
}
这样能构建出视觉连贯、边界清晰的组件组，提升整体布局的专业感。
应对嵌套与响应式布局的灵活性
在响应式设计中，某些结构在不同屏幕尺寸下可能呈现为列表或网格。利用 :first-of-type 和 :last-of-type 可动态调整边距或对齐方式。
例如，在移动端堆叠显示的卡片中，确保首张卡片无上边距，末张无下边距：
.card {
margin: 16px 0;
}
.card:first-of-type {
margin-top: 0;
}
.card:last-of-type {
margin-bottom: 0;
}
这种写法无需修改 HTML 结构，适配性更强。
基本上就这些。合理运用 :first-of-type 与 :last-of-type，能显著减少冗余类名，提升样式的可维护性和布局的灵活性。关键是理解它们基于“元素类型”而非“整体位置”进行匹配，这样才能在复杂结构中准确命中目标。
