nth-child vs nth-of-type

今天我在做一个小案例的时候，遇到这样一个问题，我想让我的第二个section 变成绿色，于是我使用了nth-child,代码如下：

section:nth-of-type(2){
    background-color: #f5f5f5;
}

结果我第二个section，并没有变色，第一个section却变色了，我觉得很奇怪。

后来，我又去查了nth-type-of 与 nth-of-type 用法,mdn这样解释nth-child:

nth-of-type:

看到这，我好像意识到点什么，我的section上面并列的还有一个header同胞元素，会不会是受这个的影响呢？于是我把代码片中nth-of-type改成了nth-of-type,这时候我想要的结果就出现了(图略）。但我还不是特别明白。我又去看了张鑫旭写的关于这两个伪类的·文章。他这样说的：

对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：

这是个段落元素
这是父标签的第二个孩子元素
对于:nth-of-type选择器，意味着选择一个元素如果：

选择父标签的第二个段落子元素
:nth-of-type选择器，恩……怎么讲呢？限制条件少点~~

再看一下他文章里举得例子，我恍然大悟。

综上：我建议大家尽量用 nth-of-type.