对于p:nth-child(2)，如果它是一个段落，它将选择其父元素的第二个元素，而p:nth-of-type(2)将选择其父元素的第二个段落。如果你仍然感到困惑，让我来为你澄清一下。考虑下面的代码片段：

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

字符串
在这里，p:nth-child(2)将选择<p>Little</p>，因为它是其父元素的第二个子元素，并且是一个段落元素。
但是，在这里，p:nth-of-type(2)将选择<p>Piggy</p>，因为它将选择其父段的所有段落中的第二个段落。

帮助来自：https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

这个问题可能会让你想起What is the difference between :first-child and :first-of-type?--事实上，这两个问题之间有很多相似之处。这个问题与另一个问题最大的不同之处在于任意整数参数X，如:nth-child(X)和:nth-of-type(X)。它们在原理上类似于它们的“第一个”和“最后一个”对应物，但是潜在的匹配元素根据页面中的实际内容而变化很大。
但首先，我们要了解一些理论。记住，简单的选择器是独立的条件。即使组合成复合选择器，它们也保持独立。这意味着p既不受:nth-child()或:nth-of-type()匹配方式的影响，也不影响:nth-child()或:nth-of-type()的匹配方式。以这种方式组合它们只是意味着元素必须 * 同时 * 匹配所有条件才能匹配。
有趣的是，这种独立的匹配意味着，我可以很有创意地表达复合词（和复杂的）选择器，* 而不改变选择器的含义 *。事实上，我现在可以这样做，使:nth-child(2)和:nth-of-type(2)之间的差异看起来如此重要，以至于伪类也可以彼此完全无关（除了“兄弟”部分）：

• p:nth-child(2)：当且仅当第二个子元素是p元素时，选择它的兄弟元素中的第二个子元素。
• p:nth-of-type(2)：选择第二个p元素。

突然之间，它们听起来真的不一样了！这就是一点解释有帮助的地方。
对于任意整数X，任何元素在同一时间只能有一个匹配:nth-child(X)的子元素。这就是为什么我选择首先提到它来强调“第二个孩子”。另外，如果这个子元素恰好是p类型，它将只匹配p:nth-child(X)（记住“type”指的是标记名）。这与:first-child和:last-child非常一致（同样，p:first-child和p:last-child也是如此）。
:nth-of-type(X)有两个方面：
1.因为:nth-of-type()中的“type”与类型选择器中的“type”是同一个概念，所以这个伪类家族 * 被设计为与类型选择器一起使用 *（即使它们仍然独立操作）。这就是为什么p:nth-of-type(2)可以简洁地表达为“在它的兄弟中选择第二个p元素”。它只是工作！
1.然而，与:first-of-type和:last-of-type不同，X要求父元素中实际上有许多相同类型的子元素。例如，如果父元素中只有一个p元素，则p:nth-of-type(2)将不匹配父元素中的任何元素，即使p元素保证匹配p:first-of-type和p:last-of-type（以及扩展后的p:only-of-type）。
举例说明：

<div class="parent">
  <p>Paragraph</p>
  <p>Paragraph</p>          <!-- [1] p:nth-child(2), p:nth-of-type(2) -->
  <p>Paragraph</p>
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <p>Paragraph</p>          <!-- [2] p:nth-child(2) -->
  <p>Paragraph</p>          <!-- [3] p:nth-of-type(2) -->
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <figure>Figure 1</figure>
  <p>Paragraph</p>          <!-- [4] -->
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <p>Paragraph</p>          <!-- [2] p:nth-child(2) -->
  <figure>Figure 1</figure>
  <hr>
  <figure>Figure 2</figure> <!-- [5] .parent > :nth-of-type(2) -->
  <p>Paragraph</p>          <!-- [5] .parent > :nth-of-type(2) -->
  <p>Paragraph</p>
  <footer>Footer</footer>
</div>

字符串
什么被选中，什么没有，为什么？

*由p:nth-child(2)和p:nth-of-type(2)选择

此元素的前两个子元素都是p元素，允许此元素同时匹配同一整数参数X的两个伪类，因为所有这些独立条件都为真：

• 是其父母的第二个子女;
• 它是p元素;并且
• 它是父元素中的第二个p元素。
  *仅p:nth-child(2)选择

第二个子元素是p元素，所以它匹配p:nth-child(2)。
但是它是 * 第一个p元素 *（第一个子元素是header），所以它不匹配p:nth-of-type(2)。

*仅p:nth-of-type(2)选择

这个p元素是上一个元素之后的第二个p元素，但它是第三个子元素，允许它匹配p:nth-of-type(2)，但不匹配p:nth-child(2)。一个父元素一次只能有一个子元素匹配:nth-child(X)，先前的p已经占用了这个特定父元素上下文中的:nth-child(2)插槽。

*未选择

这个p元素是它的父元素中唯一的一个，它不是它的第二个子元素。因此它既不匹配:nth-child(2)也不匹配:nth-of-type(2)（即使没有类型选择器限定;见下文）。

*由.parent > :nth-of-type(2)选择

这个元素是它在父元素中的第二个类型。像:first-of-type和:last-of-type一样，省略类型选择器允许伪类在同一个父元素中匹配多个元素。与它们不同的是，它实际匹配的数量取决于每个元素类型的实际数量。
这里有两个figure元素和三个p元素，允许:nth-of-type(2)匹配figure和p。但是只有一个header，一个hr和一个footer，所以它不会匹配任何这些类型的元素。
总之，:nth-child()和:nth-of-type()，带有整数参数X（即不是An+B的形式，系数A为n），功能与:first-child/:last-child和:first-of-type/:last-of-type非常相似，主要区别在于参数，沿着页面本身，影响:nth-of-type()可以匹配多少不同的元素。

当然，:nth-child()和:nth-of-type()不仅仅是一个简单的整数参数，还有很多其他的东西，但是不用说，其中的细节和可能性已经超出了这个问题的范围。

• p：nth-child（1）：表示它是任何父节点的第一个子节点，类型为段落。
• p：nth-of-type（1）：表示类型段落在任何父级中的第一次出现

p:nth-child(2){background:#f00;}
p:nth-of-type(2){background:#0f0;}

个字符

另一个答案强调了两个选择器之间的主要区别，即nth-child将考虑同一容器内的所有元素（兄弟元素），而nth-of-type将考虑同一容器内具有相同类型的所有元素。
:nth-child(an+b)伪类表示法表示在文档treeref中前面有+B-1siblers的元素
:nth-of-type(an+b)伪类表示法表示在文档treeref中具有+B-1个同级且在其前面具有相同的扩展元素名称的元素
由此我们可以在两个选择器之间添加另一个 * 重要 * 的区别，即nth-of-type通常与标记选择器一起使用，而nth-child不需要标记选择器。nth-of-type可以选择多个元素，但nth-child只能选择一个元素.使用nth-of-type添加标记选择器会将选择限制为一个元素，而将标记选择器添加到nth-child只会对我们所针对得 * 一个元素 * 添加更多限制.1

第n个子代（）

该选择器将选择.container的第二个子项。

.container :nth-child(2) {
  border:1px solid red;
}

个字符
这个选择器与上面的选择器相同，但我们添加了一个标记限制：查找.container的第二个子对象，如果它是p标记，则选择它。

.container p:nth-child(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

的字符串
如果将p更改为h1，则不会选择任何内容，因为第二个子项不是h1：

.container h1:nth-child(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

的字符串

第n个类型（）

此选择器将选择第二个p和第二个h1。按相同类型对元素进行分组后，nth-of-type的行为将与nth-child类似。

.container :nth-of-type(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

因此，我们选择第二个孩子在这个：

<div class="container">
  <p>aaa</p>
  <p>aaa</p> <-- this one -->
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
</div>

型
然后第二个孩子在这里面：

<div class="container">
  <h1>title</h1>
  <h1>title</h1> <-- this one -->
</div>

型
添加标记选择器将仅限制选择一组元素：

.container p:nth-of-type(2) {
  border:1px solid red;
}
.container h1:nth-of-type(2) {
  border:1px solid green;
}

如果您的容器只包含一种类型的元素，则两个选择器肯定会给予相同的结果，但行为不同（即后面的算法不同）。您可能还注意到，如果您从两个选择器中删除标记选择器，您也会得到相同的结果：

.container :nth-of-type(2) {
  border:1px solid red;
}
.container :nth-child(2) {
  color:red;
}

/* The below will also select the same
  .container p:nth-child(2)
  .container p:nth-of-type(2)
  .container *:nth-child(2)
  .container *:nth-of-type(2)
*/

个

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
</div>

个
另一个区别（这是个人的想法）可能是两者的性能。nth-child可以更快，因为它会同时考虑所有兄弟元素，所以我们将有一个循环来检查所有元素。nth-of-type需要考虑不同类型的元素，而不是同时考虑，所以我们可能会有更多的处理，因此它会更慢 （这是我自己基于两者是如何工作的结论。我没有正式的证明）。
1：我正在考虑在一个容器中使用第nth-child/第nth-of-type中的整数进行选择。

假设我们有以下HTML：

<div id="content">
    <p>a1</p>
    <span>a2</span>
    <p>a3</p>
    <span>a4</span>
</div>

字符串
1)#content p:nth-child(2)--适用于0个元素
因为p:nth-child(2)要求它是第二个子对象，并且标签是p，但实际上标签是<span>。
2)#content *:nth-child(2)-苹果到<span>a2</span>
因为*:nth-child(2)只要求它是第二个子项，而不要求标记名。*可以是任何标记名。
3)#content p:nth-of-type(2). --适用于<p>a3</p>
因为p:nth-of-type(2)表示<p>节点列表中的第二个节点。
4)#content *:nth-of-type(2). --适用于<p>a3</p>和<span>a4</span>
因为*:nth-of-type(2)只需要相同标签节点列表中的第二个。

p:nth-child selector在“Plain English”中的意思是选择一个元素，如果：

• 它是一个段落元素
• 它是父代的第二个子代（如果父代的第二个子代不是<p>，css将不起作用）

p:nth-of-type选择器，在“简单英语”中，意思是：

• 选择第二个段落<p>父级的子级（关心<p>，只需列出所有子级<p>并take）

.first p:nth-child(2) {
  background: blue // this css not effect
}

.first p:nth-of-type(2) {
  background: red
}

个字符

正如MDN所说：

**：nth-child（）**CSS伪类根据元素在一组兄弟中的位置匹配元素。

这意味着p:nth-child(2)将只捕获父元素的第二个子元素。
然而，p:nth-of-type(2)将捕获<p>元素，这些元素是其父元素的第二个元素，不管元素的索引。这意味着一个元素可以有100个子元素，如果最后一个子元素是其兄弟元素中的第二个段落元素，它将受到列出的样式的影响。
一些事情要记住（还没有说）：
元素是nth-child(1)和nth-of-type(1)
这是永远正确的。
元素是nth-child(2)和nth-of-type(2)
当一个元素的前两个子元素是同一类型时，这是真的。
元素是nth-child(3)和nth-of-type(2)
当一个元素的第一个和第三个子元素的类型相同，但第二个子元素的类型不同时，这是正确的。
元素是nth-child(2)和nth-of-type(3)
这是always false，因为第三个类型的元素不能是其父类型的第二个子元素。
范例：

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

个字符

p:nth-child(2)：这将选择父元素中的第二个元素<p>元素。第一个元素可以是任何其他元素。

<div>
    <h1>Title</h1>
    <p>Paragraph</p> ** p:nth-child(2)
    <p>Paragraph</p>
</div>

<div>
    <p>Paragraph</p>
    <p>Paragraph</p> ** p:nth-child(2)
    <p>Paragraph</p>
</div>

<div>
    <p>Paragraph</p>
    <h1>Text</h1>
    <p>Paragraph</p> ** None are selected
</div>

字符串
p:nth-of-type(2)：这将选择父元素中第二次出现<p>元素的所有<p>元素。

<div>
    <h1>Title</h1>
    <p>Paragraph</p>
    <p>Paragraph</p> ** p:nth-of-type(2)
</div>

<div>
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>Paragraph</p>
    <h2>Subtitle</h2>
    <h2>Subtitle</h2>
    <h2>Subtitle</h2>
    <p>Paragraph</p> ** p:nth-of-type(2)
</div>

<div>
    <h1>Title</h1>
    <p>Paragraph</p> ** None are selected
</div>

型