:nth-of-type伪类按同类型子元素位置选中目标，如p:nth-of-type(2)选中第二个p标签，不受其他标签干扰，常用于隔行变色、首段样式等场景。
CSS 的 :nth-of-type 伪类选择器可以根据父元素中同类型子元素的位置来选中特定元素，从而精确控制样式。它常用于对列表、段落、标题等重复结构中的某个或某几个元素设置不同样式。
基本语法与常见用法
:nth-of-type(n) 中的 n 可以是数字、关键字（如 even、odd）或公式（an + b）。
常用形式包括：- nth-of-type(1)：选中第一个同类型元素
- nth-of-type(even)：选中偶数位置的元素
- nth-of-type(odd)：选中奇数位置的元素
- nth-of-type(2n+1)：与 odd 效果相同，每两个跳一个
- nth-of-type(3)：选中第三个该类型元素
例如，想让文章中第二个段落变红：
code:
p:nth-of-type(2) {
color: red;
}
结合标签类型精准控制
:nth-of-type 是基于元素类型的，比如你有多个 div 和 p 混合排列，使用 p:nth-of-type(2) 会选中第 二个 p 标签，不管中间有没有其他 div。
立即学习“前端免费学习笔记（深入）”；
示例结构：
这是 div第一个 p
这是 span第二个 p
此时 p:nth-of-type(2) 会选中“第二个 p”，因为它是第二个 p 类型的元素。
实用场景举例
在实际开发中，这个选择器特别适合处理不规则结构。
- 表格中隔行变色（tr:nth-of-type(even) { background: #f2f2f2; }）
- 博客文章中只给第一个 h2 加图标
- 图片列表中每隔三张图加一个边距清空（img:nth-of-type(3n) { margin-right: 0; }）
注意与其他选择器的区别
:nth-of-type 和 :nth-child 不一样。后者是按所有子元素统一计数，而前者只看同类型元素。
比如一个 div 下第一个子元素是 p，第二个是 div，那么：
- p:nth-of-type(1) 能选中这个 p
- p:nth-child(1) 也能选中（因为它是第一个子元素）
- 但如果 p 是第二个子元素，且第一个是 span，则 nth-child(2) 才能选中，而 nth-of-type(1) 依然有效
基本上就这些。掌握 :nth-of-type 能让你在不添加 class 的情况下灵活控制结构样式，关键是理解“类型”指的是标签名。
