你把“.foo p:nth-child(2){ color:red; }  改成.foo:nth-child(2){ color:red; } 你就会知道哪里不一样了

效果不一样，nth-child好像是相对于父控件中所有的子控件来确定 n 的值

而nth-of-type: 是父控件中所有指定子控件（排除其他子控件）来确定 n 的值

nth-child：筛选的范围是当前父元素下面的所有的子元素

nth-of-type：筛选的范围是当前父元素下面同种类型的子元素

nth-child()是指他只有一个后代的才会被选择

<div class="father">

<p>唯一子代</p>

</div>

nth-of-type()是指他有很多后代或者只有一个子代，但是有一个特殊的，和其他子代都不一样的，才会被选择。

<div class="father">

<p>我是一个段落</p>

<p>我还是一个段落</p>

<div>我是一个DIV，我们不一样</div>

</div>

在这里选择的子代就是div