使用 :nth-of-type 可实现按类型周期性分组样式，如 p:nth-of-type(3n+1) 选每组首个元素，p:nth-of-type(3n) 选末尾元素，适用于同类型子元素的规律布局。
使用 CSS 的 :nth-of-type 可以按元素类型在父容器中的位置来设置样式，适合实现元素的分组视觉效果。虽然它不能直接“分组”元素，但通过结合结构选择器和公式计算，可以间接实现周期性样式分组，比如每几个元素应用相同样式。
理解 :nth-of-type 的基本用法
:nth-of-type(n) 选择父元素下第 n 个指定类型的子元素。例如
p:nth-of-type(2)会选择第二个
元素。
支持关键词和公式：
- even：选中偶数位置的元素
- odd：选中奇数位置的元素
- an + b：从第 b 个开始，每隔 a 个匹配一次
实现每 N 个元素一组的样式分组
假设你想让每 3 个段落为一组，并给每组的第一个元素添加背景色，可以用：
立即学习“前端免费学习笔记（深入）”；
p:nth-of-type(3n + 1) {
background-color: #e0f7fa;
}
这个选择器的意思是：从第 1 个开始，每 3 个
元素中的第一个（即第 1、4、7…个）被选中。
如果你想给每组最后一个元素加边框：
p:nth-of-type(3n) {
border-bottom: 2px solid #ccc;
}
结合其他选择器实现更复杂分组
如果元素类型不同，比如在一个容器中有多个
和 ，:nth-of-type 只会针对同类型元素计数。因此，若要对所有子元素统一分组，建议使用 :nth-child 更合适。
形成一个颜色循环组。
但在纯同类型子元素场景下，:nth-of-type 非常可靠。例如列表项：
li:nth-of-type(4n + 1) { color: red; }
li:nth-of-type(4n + 2) { color: blue; }
li:nth-of-type(4n + 3) { color: green; }
li:nth-of-type(4n + 4) { color: purple; }
这样每 4 个
实用技巧与注意事项
确保目标元素在父容器中是连续且同类型的，否则计数会被干扰。例如中间插入了其他标签或不同类型元素，会影响 :nth-of-type 的匹配结果。
常见应用场景包括：
- 表格中每行分组着色
- 卡片布局中每组首项突出显示
- 日历或网格中周期性样式间隔
基本上就这些。关键是掌握 an + b 公式的意义：a 是周期长度，b 是起始偏移。合理设置就能实现灵活的分组样式控制。
