示例：

p:nth-of-type(2) { color: red; }

2. 使用公式 an+b 实现周期性样式

可以使用 an+b 的形式实现规律性的样式切换，比如隔行变色、每三项加边框等。

• 2n+1：选择奇数项（1, 3, 5...）
• 2n：选择偶数项（2, 4, 6...）
• 3n：每三项中的第3、6、9...项
• 3n+1：每三项中的第1、4、7...项

常用于表格或列表的斑马条纹：

tr:nth-of-type(2n+1) { background: #f0f0f0; }

3. 结合负值选择前几项

使用负系数可以选中前面有限数量的元素。例如 :nth-of-type(-n+3) 表示选择前3个该类型的子元素。

适用场景：只对前几个项目设置特殊样式，如导航前三个加图标。

免费AI图片编辑器、滤镜与设计工具

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

4. 与其它选择器组合提升精确度

可与其他伪类或类选择器结合，进一步缩小匹配范围。

• .item:nth-of-type(odd)：选择具有 .item 类的奇数项
• div:nth-of-type(1)：选择第一个 div 类型子元素（类似 :first-of-type）
• p:nth-of-type(1):not(:only-of-type)：第一个且不是唯一一个的段落

5. 注意与 :nth-child 的区别

:nth-of-type 关注的是“同类型”元素的位置，而 :nth-child 是所有子元素中的位置。如果结构中混杂了不同标签，两者结果可能完全不同。

例如：

此时 p:nth-of-type(2) 能选中“C”，但 p:nth-child(2) 不会选中任何元素（因为第二个子元素是 span）。

基本上就这些。合理利用 :nth-of-type 能减少 HTML 中多余的 class，让结构更干净，样式更有规律。关键是理解“类型”和“位置”的关系，避免误选。