如何在CSS中使用伪类:last-of-type控制最后类型元素_结合:last-of-type设置边框

与 :last-child 不同的是，:last-of-type 不要求该元素是父元素的最后一个子元素，只要它是同类型中的最后一个即可。

<div class="container">
  <p>第一段</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  <p>第二段</p>
  <p>最后一段</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1754" title="Clips AI"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680339789381.jpg" alt="Clips AI"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1754" title="Clips AI">Clips AI</a>
                                                                        <p>自动将长视频或音频内容转换为社交媒体短片</p>
                                                                </div>
                                                                <a href="/ai/1754" title="Clips AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
  <span>其他内容</span>
</div>

.container p:last-of-type {
  border-bottom: none;
}

上面的代码会为最后一个

结合 :last-of-type 设置边框的最佳实践

常见场景是在列表项之间添加分隔线，但不希望最后一个元素有下边框。使用 :last-of-type 可以轻松实现这一效果。

• 先为所有同类元素设置边框
• 再用 :last-of-type 覆盖最后一个元素的边框样式
• 适用于
• 、
  、

  等任意标签 实际例子：

  .item-list div {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  .item-list div:last-of-type {
    border-bottom: none;
  }
  

  这样每个

  都有下边框，唯独最后一个没有，视觉上更整洁。

  注意事项和兼容性

  :last-of-type 是 CSS3 选择器，现代浏览器都支持，但在极老版本（如 IE8 及以下）中不可用。如果需要兼容老浏览器，建议结合类名手动控制。

  另外要留意标签类型的判断 —— 它只针对同一标签。例如

  和

  不会被视为同类型，即使它们在语义上相似。

  基本上就这些。合理使用 :last-of-type 能让你的样式更简洁，减少不必要的 HTML 类名，提升维护效率。