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