:nth-child根据父元素下所有子元素的总顺序选择，不区分类型；:nth-of-type仅按同类型标签的顺序选择。例如p:nth-child(3)选第3个子元素中的p标签，而p:nth-of-type(2)选第2个p标签，忽略其他类型元素。
在css中，:nth-child 和 :nth-of-type 都是用来选择特定位置的子元素的伪类，但它们的计算方式不同，使用场景也有区别。
nth-child 用法
:nth-child(n) 是基于父元素下所有子元素的顺序来计算的，不管元素类型。只要该子元素是第 n 个孩子，就会被选中。
例如：
假设html结构如下：
<div><p>段落1</p><span>文字1</span><p>段落2</p><span>文字2</span><p>段落3</p></div>
使用 p:nth-child(3) 会选择第三个子元素，也就是第二个 <p>（“段落2”），因为它是父元素下的第3个孩子。
注意：如果写成 p:nth-child(1)，则不会选中第一个 <p>，因为第一个孩子虽然是 <p>，但它确实是第1个孩子，所以会被选中。但如果第一个孩子是 <span>，那么 p:nth-child(1) 就不会生效。
nth-of-type 用法
:nth-of-type(n) 是针对同类型的标签进行计数。它只看当前标签类型在同类型中的顺序。
继续上面的例子：
使用 p:nth-of-type(2) 会选择第二个 <p> 标签（“段落2”），因为它是在所有 <p> 标签中的第2个，不管它在整个子元素序列中排第几。
这个选择器更关注“同类元素”的位置，适合当你只想对某类标签（如所有段落或所有图片）中的第几个进行样式控制。
关键区别总结
- :nth-child 看的是父元素下所有子元素的总顺序，不区分标签类型。
- :nth-of-type 只看当前元素类型在同类中的顺序。
- 当结构复杂、多种标签混排时，:nth-of-type 更可靠。
- 如果所有子元素是同一类型，两者行为可能一致。
常见用法示例
选择奇数行和偶数行：
/* 奇数位置的孩子 */ li:nth-child(odd) { background: #f0f0f0; } <p>/<em> 所有 p 标签中的偶数个 </em>/ p:nth-of-type(even) { color: blue; }</p>
使用公式 an+b，比如 2n+1 表示每隔一个选一个。
基本上就这些，理解它们的计数逻辑是关键。