首页 > 其他分享> > CSS nth-child与nth-of-type的区别

CSS nth-child与nth-of-type的区别

2021-04-24 18:01:36 作者：互联网

测试代码

<!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区分类别

标签：color,nth,background,cyan,Div,type,CSS
来源： https://blog.csdn.net/kfepiza/article/details/116096990