nth-childとnth-of-typeの違い

nth-childのscript部分
$(function(){
  $('p:nth-child(even)').css('color','#00F');
});

p要素の偶数の文字を青色に変える

html部分
<h1>勉強の科目</h1>
<h2>文系</h2>
<p>古典</p>
<p>日本史</p>
<p>英語</p>
<h2>理系</h2>
<p>物理</p>
<p>数学</p>
<p>科学</p>
結果

f:id:retail:20150513193058p:plain
となります

nth-of-typeの場合
$(function(){
  $('p:nth-of-type(even)').css('color','#00F');
});

nth-childと意味は同じなのですが・・・

結果

f:id:retail:20150513193247p:plain
文系の色は一致していますが、理系の色が逆になっています

nth-childの場合は全ての文章の中からp要素の偶数の文字を青色に変える
f:id:retail:20150513193934p:plain
nth-of-typeの場合はp要素の中から偶数の文字を青色に変える
f:id:retail:20150513194146p:plain