:first-of-type与:last-of-type实战技巧解析

:first-of-type 和 :last-of-type 是CSS中精准控制同类元素首尾样式的强大伪类选择器，它们基于元素类型（而非整体位置）在父容器中智能定位首个和最后一个指定标签（如p、h2等），让你轻松实现文章首段加粗放大、末段留白、列表首尾去边距等效果，无需添加冗余类名，显著提升代码简洁性、可维护性与语义表达力；兼容IE9+及所有现代浏览器，是处理动态内容和混合结构时既实用又常被低估的CSS利器。

在CSS中，:first-of-type 和 :last-of-type 是非常实用的伪类选择器，它们可以根据元素在父容器中的位置来精确地选中特定类型的子元素。结合使用这两个选择器，可以轻松为列表、段落或复杂结构中的首个和末个同类元素设置独立样式，而无需添加额外的类名。

:first-of-type 与 :last-of-type 基本作用

这两个伪类选择器的作用是基于元素的“类型”（即标签名）在其父元素中的位置进行匹配：

• :first-of-type 选中父元素中第一个该类型的子元素
• :last-of-type 选中父元素中最后一个该类型的子元素

例如，在一段包含多个 p 和 h2 的文章中，你可以只对第一个段落或最后一个段落应用特殊样式，即使它们不是父元素的第一个或最后一个子节点。

实际应用场景：文章段落首尾样式控制

假设你有一篇文章，结构如下：

<article>
  <h2>标题</h2>
  <p>这是第一段内容...</p>
  <p>这是第二段内容...</p>
  <p>这是最后一段内容...</p>
  <img src="image.jpg" alt="图片">
</article>

你想让第一个 p 段落有更大的字体，最后一个 p 段落底部留出更多空白。可以这样写CSS：

article p:first-of-type {
  font-size: 1.2em;
  font-weight: bold;
}

article p:last-of-type {
  margin-bottom: 2em;
}

这段样式会准确作用于第一个和最后一个 p 元素，不受中间其他标签干扰。

结合使用实现更精细的布局控制

在列表或卡片组件中，这类选择器也非常有用。比如一个包含多种元素类型的侧边栏：

<aside>
  <p>欢迎信息</p>
  <ul><li>选项1</li></ul>
  <p>提示说明</p>
  <p>联系方式</p>
</aside>

你可以只对第一个和最后一个 p 元素设置边距：

aside p:first-of-type {
  margin-top: 0;
}

aside p:last-of-type {
  margin-bottom: 0;
  font-size: 0.9em;
  color: #666;
}

这种写法避免了手动添加类名，提升了代码的可维护性。

注意事项与兼容性

使用时需注意以下几点：

• 选择器基于“元素类型”，所以 p:first-of-type 只会在同为 p 的兄弟元素中找第一个
• 如果父元素中没有对应类型的元素，规则不会生效
• IE9及以上浏览器支持，现代浏览器完全兼容
• 不要与 :first-child 或 :last-child 混淆，后者依赖的是整体子元素顺序

基本上就这些。合理使用 :first-of-type 和 :last-of-type，能让你的样式更简洁、语义更清晰，特别适合动态内容或CMS输出的结构化文本处理。不复杂但容易忽略。

文中关于CSS,伪类选择器的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《:first-of-type与:last-of-type实战技巧解析》文章吧，也可关注golang学习网公众号了解相关技术文章。