CSS中如何使用:first-of-type和:last-of-type选择元素

:first-of-type 和 :last-of-type 是CSS中强大而实用的伪类选择器，它们依据元素的标签类型（如p、li、div等）而非类名或ID，在同类型兄弟元素中精准定位第一个或最后一个实例，轻松实现段落首尾强调、列表项边距优化、表单字段样式定制等常见布局需求，显著提升样式的语义性、简洁性与可维护性——无需冗余类名，即可优雅控制动态内容的视觉表现。

在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更简洁高效。

今天关于《CSS中如何使用:first-of-type和:last-of-type选择元素》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS,选择器的内容请关注golang学习网公众号！