CSS伪类选择器:first-of-type与last-of-type结合应用_子元素特定样式

:first-of-type 选中父元素中首个指定类型的子元素，:last-of-type 选中最后一个指定类型的子元素，二者结合可精准控制同类元素的首尾样式，如为文章首个段落加大字体、末个段落增加底部边距，或在混合元素结构中仅对特定标签（如 p）的首尾实例设置样式，避免添加冗余类名，提升代码可维护性；需注意其基于元素类型匹配而非整体位置，与 :first-child 等区分，且兼容性良好，IE9 及以上支持。

在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 元素，不受中间其他标签干扰。

Fliki

高效帮用户创建视频，具有文本转语音功能

151

查看详情

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

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

<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结合应用_子元素特定样式的详细内容，更多请关注php中文网其它相关文章！