CSSlast-of-type与nth-of-type区别详解

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS last-of-type与nth-of-type使用详解》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

:last-of-type选择同类型最后一个元素，如取消末段下边距；:nth-of-type(n)按顺序选第n个同类元素，可实现隔行变色或前几项加粗；二者结合能精准控制样式，减少冗余类名，提升维护性。

在CSS中，:last-of-type 和 :nth-of-type 是两个非常实用的结构伪类选择器，它们可以根据元素在父容器中的位置关系来精确选择目标元素。下面通过实际应用案例说明它们的用法和区别。

:last-of-type：选择同类型中的最后一个元素

:last-of-type 会选中其父元素下同一类型标签的最后一个实例。这个“类型”指的是元素的标签名。

• 在文章内容中，为最后一个段落取消底部边距：

p:last-of-type { margin-bottom: 0; }

如果一篇文章包含多个

标签，这样可以避免最后一个段落后留出多余空白。

• 在混合标签结构中突出最后一个列表项：

例如以下HTML：

<div>
  <p>段落1</p>
  <ul><li>列表1</li></ul>
  <p>段落2</p>
  <ul><li>列表2</li></ul>
  <ul><li>列表3</li></ul> <!-- 这个 ul 是 ul 类型的最后一个 -->
</div>

使用：

ul:last-of-type { border: 2px solid blue; }

只有最后一个

被选中并添加边框。

:nth-of-type(n)：按类型顺序选择第n个元素

:nth-of-type(n) 可以根据元素在其父级中同类标签的顺序位置进行选择，支持数字、公式或关键字（如 even, odd）。

典型使用示例：
• 实现隔行变色的表格样式：

tr:nth-of-type(odd) { background-color: #f9f9f9; }
tr:nth-of-type(even) { background-color: #eee; }

即使表格中有 或其他结构，也能正确按 tr 的顺序着色。

• 选择前三个段落并加粗：

p:nth-of-type(-n+3) { font-weight: bold; }

这会匹配前3个

元素，常用于文章开头强调。

• 为特定位置的子元素设置样式，比如第二个图片：

img:nth-of-type(2) { border-radius: 8px; }

页面中第二个 元素将被加上圆角。

两者结合使用的场景

有时可组合使用以实现更精细控制。例如：

只对非最后一个段落设置下边框：

p:not(:last-of-type) { border-bottom: 1px solid #ccc; }

这样每段之间有分隔线，但最后一段不会多出一条无意义的底线。

基本上就这些。合理使用 :last-of-type 和 :nth-of-type 能减少HTML中冗余的类名，让样式更智能、更易维护。关键是理解“类型”是指相同标签名在父元素内的排列顺序。不复杂但容易忽略细节。

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