基本

div#box0-1 p:nth-of-type(3){
	color:#ff5555;
}
div#box0-2 p:nth-child(3){
	color:#5555ff;
}

nth-of-typeとnth-childの比較。
nth-childが「★番目の要素が▲▲のとき、スタイルを適用」なのに対し、
nth-of-typeは「★番目の▲▲要素に対し、スタイルを適用(他の要素が挟まっていても数えない)」。

問題の挙動

div#box1-1 p:nth-of-type(3){
	color:#ff5555;
}
div#box1-2 p.nth:nth-of-type(3){
	color:#5555ff;
}
div#box1-3 p.nth:nth-of-type(3){
	color:#55ff55;
}

こちらの思った挙動としては、.nthの3番目、#box2-2なら「いとうれしくて、」にスタイルが適用されることなのだが、実際は3つめのp、2番目の.nth「「朧月夜に似るものぞなき」とうち誦じて、」に適用されている。

#box2-3では、3つめのpである「「朧月夜に似るものぞなき」とうち誦じて、」に.nthが無いため、スタイルが適用されていない。なんだかnth-childを使っている気分だ。

実験。タグを指定しないパターン

div#box2-1 *.nth:nth-of-type(3){
	color:#ff5555;
}
div#box2-2 .nth:nth-of-type(3){
	color:#5555ff;
}

結果は同じである。nth-of-typeは、
①要素▲▲の★番目を取得
②①の要素が、属性名◆◆を持つとき、スタイルを適用する
といった判別をしていることがわかる。