nth-child按所有子元素排序，nth-of-type按同类型标签排序；例如p:nth-child(2)选父元素第2个子元素且为p，而p:nth-of-type(2)选第2个p标签，忽略其他类型兄弟元素。
在CSS中，nth-child 和 nth-of-type 都用于选择特定位置的子元素，但它们的判断逻辑完全不同，容易混淆。理解它们的区别以及高阶用法，能让你更精准地控制样式。
nth-child：基于父元素的所有子元素排序
nth-child 会把父元素下的所有子元素统一计数，不管类型是否相同。只要目标元素在第n个位置上，就会被选中。
例如：
-
p:nth-child(2)表示：父元素的第二个子元素，且它必须是<p>标签才会匹配。 - 如果第二个子元素是
<div>，即使它是段落的“兄弟”，也不会被选中。
举个例子：
立即学习“前端免费学习笔记（深入）”；
<div> <h2>标题</h2> <p>第一个段落</p> <!-- 这是第2个子元素 --> <p>第二个段落</p> </div>
使用 p:nth-child(2) 能选中“第一个段落”，因为它正好是父元素的第二个子元素。
nth-of-type：基于同类型标签的排序
nth-of-type 只对指定类型的标签单独计数。它会忽略其他类型的兄弟元素，只看当前标签类型的第几个。
继续上面的例子：
-
p:nth-of-type(1)选中第一个<p>元素（即“第一个段落”）。 -
p:nth-of-type(2)选中第二个<p>元素（即“第二个段落”）。
哪怕前面有 <h2>，p 的类型计数是独立的。
常见误区对比
假设HTML结构如下：
<section> <p>段落1</p> <div>盒子1</div> <p>段落2</p> <p>段落3</p> </section>
-
p:nth-child(1)：匹配第一个<p>，因为它是第一个子元素。 -
p:nth-child(2)：不匹配任何元素，第二个子元素是<div>，不是p。 -
p:nth-of-type(2)：匹配“段落2”，它是第2个p标签。 -
p:nth-of-type(3)：匹配“段落3”。
nth选择器的高阶用法
CSS的 nth 系列支持数学表达式和关键词，非常灵活。
-
:nth-child(2n)：选择偶数位元素（2, 4, 6...），常用于隔行变色。 -
:nth-child(2n+1)：选择奇数位元素（1, 3, 5...）。 -
:nth-child(n+4)：从第4个开始的所有子元素。 -
:nth-child(-n+3)：只选前3个子元素。 -
:nth-of-type(3n)：每3个同类型元素中的最后一个。
还可以结合关键词：
-
:first-child等价于:nth-child(1) -
:last-child等价于:nth-last-child(1) -
:nth-of-type(even)和(odd)支持直接写奇偶。
基本上就这些。关键在于搞清“按所有子元素排”还是“按同类标签排”。用错选择器可能导致样式不生效，调试时要特别注意DOM结构。
