w3c官方是这样解释的：
:nth-child(n)
例 p:nth-child(2)
选择属于其父元素的第二个子元素的每个<p>元素。
:nth-of-type(n)
例 p:nth-of-type(2)
选择属于其父元素第二个<p>元素的每个<p>元素。
我这边有这样一段代码：
<ul class="clearfix">
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
</ul>
我的目的是对class是nav_after的最后一个要做处理时（li的数量我这边是固定的），我想到了用选择器然后用nth-child，css如下：
.seckill_title .seckill_nav .nav_after:nth-child(4) {
background-color: pink;
}结果是所有li中的第4个变了css效果，当我用nth-child用单数（比如1、3）时，却都没有变化。不是很清楚原因。
然后我想着先解决问题，就又找了一个，nth-of-type，我读了w3c的官方解释，感觉是我要的选择器，使用之后的效果，同上。
所以现在想了解一下关于这两种选择器的原理，哪位大神能帮忙解释一下，前端新人，在此谢过了。、
使用 nth-child，是根据所有子元素算的。.nav_after:nth-child(4)是第四个class为nav_after的li，.nav_after:nth-child(3)是第三个class为nav_after的li，第三个li没有class，显然不存在，所以单数没变颜色
.nav_after:nth-child(4)的意思是：.nav_after的父元素（这里就是ul）的第四个子元素如果是.nav_after的时候适用。
题主的代码中，第四个子元素恰好含有类名.nav_after，所以设置背景有效；当你写成单数时，由于单数的li并没有设置.nav_after类名，所以没有效果。
nth-of-type适用于：当子元素的类型超过一种的时候，针对同类型的子元素计算。如下代码，div包含h2型子元素和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-of-type(4)就表示第四个p。
如果把h2也都加上类名.nav_after，那么.nav_after:nth-of-type(4)就表示第四个h2和第四个p了。.nav_after:nth-child(4)表示父元素的第四个子元素，不分类型，如果第四个子元素含有类名.nav_after就有效，不含就没效。
题主的代码，ul的子元素只有一种类型li，所以此时nth-of-type(4)和nth-child(4)都指向第四个子元素li了。