【CSS】nth-childとnth-of-typeの違いとクラスへ直接指定はできない事について

<div class="content-body">
	<span>span</span>
	<div>div</div>
	<div>div</div>
	<div>div</div>
	<div>div</div>
</div>

.content-body{
	display: flex;
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-body span{
	width:100px;
	height:100px;
	background-color:#ddd;
	border:1px solid #666;
}
 
.content-body div{
	display:block;
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}

<div class="content-body">
	<span>span</span>
 
	/*nth-of-typeはここからdivの数を数える*/
	<div>div</div>
	<div>div</div>
	<div>div</div>/*nth-of-typeの3つ目*/
	<div>div</div>
</div>

/*divにnth-of-typeで3番目の背景を薄いピンクに*/
.content-body div:nth-of-type(3){
	background-color:#ffcccc;
}

<div class="content-body">
 
	/*nth-childはここから全てのセレクタを数を数える*/
	<span>span</span>
	<div>div</div>
	<div>div</div>/*nth-childの3つ目*/
	<div>div</div>
	<div>div</div>
</div>

/*divにnth-childで3番目の背景を薄いピンクに*/
.content-body div:nth-child(3){
	background-color:#ffcccc;
}

<div class="content-body">
 
	/*nth-childはここから全てのセレクタを数を数える*/
	<span class="box1">.box1</span>
 
	/*nth-of-typeはここからdivの数を数える*/
	<div class="box1">.box1</div>
	<div class="box2">.box2</div>/*nth-childの3つ目*/
	<div class="box2">.box2</div>/*nth-of-typeの3つ目*/
	<div class="box2">.box2</div>
</div>

/*.box2にnth-childで3番目の背景を薄いピンクに*/
.box2:nth-child(3){
	background-color:#ffcccc;
}
 
/*.box2にnth-of-typeで3番目の背景を薄いブルーに*/
.box2:nth-of-type(3){
	background-color:#99cccc;
}

<div class="content-body">
	/*nth-childはここから全てのセレクタを数を数える*/
	<span class="box1">.box1</span>
 
	/*divからspanへセレクタを変更*/
	<span class="box1">.box1</span>
 
	/*nth-of-typeはここからdivの数を数える*/
	<div class="box2">.box2</div>/*nth-childの3つ目*/
	<div class="box2">.box2</div>
	<div class="box2">.box2</div>/*nth-of-typeの3つ目*/
</div>