选择中的:nth-child(n)和:nth-of-type(n)的区别

w3c官方是这样解释的：

:nth-child(n)    
例 p:nth-child(2)      
选择属于其父元素的第二个子元素的每个<p>元素。

:nth-of-type(n)    
例 p:nth-of-type(2)    
选择属于其父元素第二个<p>元素的每个<p>元素。

<div>
    <h2>h元素</h2>
    <p class="nav_after">p元素</p>
    <h2>h元素</h2>
    <p class="nav_after">p元素</p>
    <h2>h元素</h2>
    <p class="nav_after">p元素</p>
    <h2>h元素</h2>
    <p class="nav_after">p元素</p>
</div>

.nav_after:nth-child(4)的意思是：.nav_after的父元素（这里就是ul）的第四个子元素如果是.nav_after的时候适用。

代码中，第四个子元素恰好含有类名.nav_after，所以设置背景有效；当你写成单数时，由于单数的li并没有设置.nav_after类名，所以没有效果。

nth-of-type适用于：当子元素的类型超过一种的时候，针对同类型的子元素计算。如下代码，div包含h2型子元素和p型子元素。

.nav_after:nth-of-type(4)就表示第四个p。
如果把h2也都加上类名.nav_after，那么.nav_after:nth-of-type(4)就表示第四个h2和第四个p了。
.nav_after:nth-child(4)表示父元素的第四个子元素，不分类型，如果第四个子元素含有类名.nav_after就有效，不含就没效。