:nth-of-type 伪类选择器按元素类型和位置精准匹配，不受其他标签干扰。1. p:nth-of-type(2) 选中第二个段落，忽略非p标签；2. an+b 公式实现周期样式，如2n+1选奇数项用于斑马纹；3. -n+3 形式选前3项，适合前几项特殊样式；4. 可与类、伪类组合，如.item:nth-of-type(odd)；5. 区别于 :nth-child，后者按所有子元素排序，前者仅计同类型。正确使用可减少冗余class，提升样式逻辑性。
:nth-of-type 是 CSS 中一个非常实用的伪类选择器，能够根据元素在其父容器中的位置（按类型区分）来选择目标元素。掌握一些使用技巧可以让样式控制更灵活、代码更简洁。以下是几个常见的应用技巧：
1. 精准选择同类型子元素
当父元素包含多种标签类型时，:nth-of-type 只会计算相同标签类型的子元素。比如在一个包含 <p> 和 <div> 的容器中，p:nth-of-type(2) 会选择第二个 <p> 元素，而不会受中间的 <div> 影响。
示例：
/* 选择第2个段落 */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个该类型的子元素。
适用场景：只对前几个项目设置特殊样式，如导航前三个加图标。
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 是所有子元素中的位置。如果结构中混杂了不同标签，两者结果可能完全不同。
例如：
<div><p>A</p><span>B</span><p>C</p></div>此时 p:nth-of-type(2) 能选中“C”，但 p:nth-child(2) 不会选中任何元素（因为第二个子元素是 span）。
基本上就这些。合理利用 :nth-of-type 能减少 HTML 中多余的 class，让结构更干净，样式更有规律。关键是理解“类型”和“位置”的关系，避免误选。
