测试代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>nth-child和nth-of-type的区别</title>
<style>
body{margin:0}
header{background-color:black; color:white;}
legend{font-size:30px;}
#Div-1>:nth-child(odd){background-color:cyan}
#Div-2>:nth-of-type(odd){background-color:cyan}
#Div-3>:nth-child(even){background-color:cyan}
#Div-4>:nth-of-type(even){background-color:cyan}
#Div-5>:nth-child(3){background-color:cyan}
#Div-6>:nth-of-type(3){background-color:cyan}
#Div-7>:nth-child(3){background-color:cyan}
#Div-8>:nth-of-type(3){background-color:cyan}
</style><script>
</script></head><body><header id="BodyHeader">
<h1>nth-child和nth-of-type的区别</h1>
<p>nth-child不区分tagName , nth-of-type会每种同类标签都来一遍
</header><div id="BodyDiv010"><hr/>
<div id="Template" hidden>
<label>label-1</label><label>label-2</label><label>label-3</label><label>label-4</label><label>label-5</label><label>label-6</label><label>label-7</label><label>label-8</label>
<span>span-1</span><span>span-2</span><span>span-3</span><span>span-4</span><span>span-5</span><span>span-6</span><span>span-7</span><span>span-8</span>
<label>label-9</label><label>label-10</label><label>label-11</label><label>label-12</label><label>label-13</label><label>label-14</label><label>label-15</label>
<span>span-9</span><span>span-10</span><span>span-11</span><span>span-12</span><span>span-13</span><span>span-14</span><span>span-15</span>
<strong>strong-1</strong><strong>strong-2</strong><strong>strong-3</strong><strong>strong-4</strong><strong>strong-5</strong><strong>strong-6</strong><strong>strong-7</strong>
<s>s1</s><s>s2</s><s>s3</s><s>s4</s><s>s5</s><s>s6</s><s>s7</s>
<label>label-16</label><label>label-17</label><label>label-18</label><label>label-19</label><label>label-20</label><label>label-21</label><label>label-22</label>
<p>段落1</p><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p>
</div>
<fieldset><legend>↓ #Div-1>:nth-child(odd){background-color:cyan}</legend>
<div id="Div-1" ></div>
</fieldset>
<fieldset><legend>↓ #Div-2>:nth-of-type(odd){background-color:cyan}</legend>
<div id="Div-2" ></div>
</fieldset>
<fieldset><legend>↓ #Div-3>:nth-child(even){background-color:cyan}</legend>
<div id="Div-3" ></div>
</fieldset>
<fieldset><legend>↓ #Div-4>:nth-of-type(even){background-color:cyan}</legend>
<div id="Div-4" ></div>
</fieldset>
<fieldset><legend>↓ #Div-5>:nth-child(3){background-color:cyan}</legend>
<div id="Div-5" ></div>
</fieldset>
<fieldset><legend>↓ #Div-6>:nth-of-type(3){background-color:cyan}</legend>
<div id="Div-6" ></div>
</fieldset>
<fieldset><legend>↓ #Div-7>:nth-child(3){background-color:cyan}</legend>
<div id="Div-7" ></div>
</fieldset>
<fieldset><legend>↓ #Div-8>:nth-of-type(3){background-color:cyan}</legend>
<div id="Div-8" ></div>
</fieldset>
</div><footer id="BodyFooter"></footer><script>
function setInner(id){let s=document.getElementById("Template").innerHTML; document.getElementById(id).innerHTML=s;}
setInner("Div-1");
setInner("Div-2");
setInner("Div-3");
setInner("Div-4");
setInner("Div-5");
setInner("Div-6");
setInner("Div-7");
setInner("Div-8");
</script></html>
效果截图
结论
nth-child不区分类别 , nth-of-type区分类别