:nth-of-type(n) と :nth-child(n) の違い

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style rel="stylesheet">
	.sample * {
		background: #f2f2f2;
		color: #000;
		max-width: 300px;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.sample div:nth-of-type(odd) {
		color: #f44;
	}
	.sample div:nth-child(even) {
		background: #ddd;
	}
	</style>
</head>
<body>
	<div class="sample">
		<div>div</div>
		<div>div</div>
		<p>p</p>
		<div>div</div>
		<div>div</div>
		<div>div</div>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<div>div</div>
		<div>div</div>
		<div>div</div>
		<div>div</div>
		<p>p</p>
		<div>div</div>
	</div>
</body>
</html>

違いはどれが検索対象になるか

.sample div:nth-of-type(odd) は .sample1 の子要素にある全ての div のみを検索対象として、その中の奇数にあたる div を装飾している。

.sample div:nth-child(even) は .sample1 の子要素にある全てのタグを検索対象として、その中の偶数にあたる div のみを装飾している。