17370845950

: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结构：

你想为第一个和最后一个段落设置特殊样式：

这样，“第一段文字”会变成蓝色，“第三段文字”加粗显示。注意 h2 不影响 p 的计数，因为它们是不同类型。

常见应用场景

这些伪类特别适合用于内容流中动态生成的结构：

• 文章段落首尾强调
• 列表中首个/末个项目去边距或加图标
• 表单字段中第一个输入框自动聚焦样式

例如，在无序列表中去除首项上边距、末项下边距：

基本上就这些。掌握 :first-of-type 和 :last-of-type 能让你更灵活地处理结构化内容，减少对类名的依赖，让CSS更简洁高效。