:nth-child 不区分子元素的类型，而 :nth-of-type 则区分子元素的类型。
比如说
<style>div :nth-child(odd) {background:red}
div :nth-child(even) {background:blue}
</style>
<div>
<h1>第1行</h1>
<p>第2行</p>
<p>第3行</p>
<h2>第4行</h2>
<p>第5行</p>
<h1>第6行</h1>
<h2>第7行</h2>
</div>
结果是：
第1行红色
第2行蓝色
第3行红色
第4行蓝色
第5行红色
第6行蓝色
第7行红色
如果改为
<style>div :nth-of-type(odd) {background:red}
div :nth-of-type(even) {background:blue}
</style>
<div>
<h1>第1行</h1>
<p>第2行</p>
<p>第3行</p>
<h2>第4行</h2>
<p>第5行</p>
<h1>第6行</h1>
<h2>第7行</h2>
</div>
则结果是：
第1行红色
第2行红色
第3行蓝色
第4行红色
第5行红色
第6行蓝色
第7行蓝色
nth-child()括号里面的顺序号是指“兄弟姐妹”之间的序号，并不是整个家族不分辈分的序号。在你的代码中，第一个div和第二个div是兄弟关系，它们的序号是1和2，所以它们分别获得了第1个和第2个样式，而3-1和3-2这两个div则是前两个div的“侄子”（它们外面所套的那个div则是它们的“父亲”），所以它们的序号会重新分配为1和2，并分别匹配第1和第2个样式。听懂没有？改成这样就行：
12345<style>body>div:nth-child(1) {background:#78caf1
/*蓝*/}body>div:nth-child(2) {background:#ffc04c
/*橙*/}div>div:nth-child(1) {background:#33bf51
/*绿*/}</style>
