:first-of-type选中同类型子元素中的第一个，:last-of-type选中最后一个，二者按标签类型匹配，不受类名或ID影响。例如p:first-of-type将样式应用于首个段落，p:last-of-type作用于末尾段落，常用于文章段落、列表项或表单字段的首尾元素样式控制，如去除li:first-of-type上边距、加粗p:last-of-type文字，提升CSS简洁性与可维护性。
在CSS中，:first-of-type 和 :last-of-type 是非常实用的伪类选择器，用于选中某一类型元素中的第一个或最后一个。它们能帮助你在不添加额外类名的情况下，精准控制特定元素的样式。
理解 :first-of-type 与 :last-of-type 的作用
这两个伪类基于元素的标签类型（如 p、div、li 等）进行匹配：
- :first-of-type 选中父元素下同类型子元素中的第一个
- :last-of-type 选中父元素下同类型子元素中的最后一个
注意：它们只关心元素的“类型”和它在同类型兄弟中的位置，不依赖于类名或ID。
实际使用示例
假设你有以下HTML结构：
标题
第一段文字
第二段文字
第三段文字
你想为第一个和最后一个段落设置特殊样式：
p:first-of-type {color: blue;
}
p:last-of-type {
font-weight: bold;
}
这样，“第一段文字”会变成蓝色，“第三段文字”加粗显示。注意 h2 不影响 p 的计数，因为它们是不同类型。
常见应用场景
这些伪类特别适合用于内容流中动态生成的结构：
- 文章段落首尾强调
- 列表中首个/末个项目去边距或加图标
- 表单字段中第一个输入框自动聚焦样式
例如，在无序列表中去除首项上边距、末项下边距：
li:first-of-type {margin-top: 0;
}
li:last-of-type {
margin-bottom: 0;
}
基本上就这些。掌握 :first-of-type 和 :last-of-type 能让你更灵活地处理结构化内容，减少对类名的依赖，让CSS更简洁高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
