nth-child vsnth-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.