假设有如下代码结构，想要查找 Piggy 那个 p
<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!-- Want this one -->
</section>
使用 nth-child 是不正确的：
p:nth-child(2) { color: red; } /* Now incorrect */
使用 nth-of-type 是正确的 :
p:nth-of-type(2) { color: red; } /* Still works */
即：
nth-child 用人话讲：
1. 查找某个p元素
2. 这个元素是它父级节点的第二个元素
nth-of-type 用人话讲：
1. 查找所有p元素中第二个p元素
原文链接： https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/