全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器
结合以下样例
<!DOCTYPE html>
<html>
<head>
<style>
.a:nth-of-type(4)
{
background:#ff0000;
}
.a:nth-child(4){
background:green;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<div class="a">div1</div>
<p>p1特别</p>
<label class="a">label1</label>
<div>div2特别</div>
<div>div2特别的</div>
<div class="a">div3</div>
<p class="a">p2</p>
<label class="a">label2</label>
<div class="a">div4</div>
<p class="a">p3</p>
<label>label3特别</label>
<div class="a">div5</div>
<p class="a">p4</p>
<label class="a">label4</label>
</body>
</html>
结合以上结果来解释
首先是.a:nth-child(4)
1.找到.a元素父元素下所有的子元素,即body下所有的元素
2.找到第4个元素,
3.再去匹配class选择器.a,如果匹配到了,就赋予样式,{background-color:green}
然后是.a:nth-of-type(4)
1.找到.a元素父元素下所有的子元素,即body下所有的元素
2.找到其中满足class选择器.a的元素,并归类得到几种tagname,div,label,p(这就是nth-of-type中type的含义)
3.对body下所有的元素按以上的tagname分组
得到如下
div组
<div class="a">div1</div>
<div>div2特别</div>
<div>div2特别的</div>
<div class="a">div3</div>
<div class="a">div4</div>
<div class="a">div5</div>
label组
<label class="a">label1</label>
<label class="a">label2</label>
<label>label3特别</label>
<label class="a">label4</label>
p组
<p>p1特别</p>
<p class="a">p2</p>
<p class="a">p3</p>
<p class="a">p4</p>
4.然后分别对每个type组内找到第4个元素
5.分别对找到的第四个元素匹配class选择器.a,如果匹配到了,就赋予样式{background:#ff0000;}
总结,nth-of-type最容易让人误解的就是找到父元素内所有匹配到的子元素排序选择,其实不是的,网上几乎所有文章都用的是连续class的元素来测试,所以都没有发现nth-of-type的真正用法.
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
40
0- 0
已为社区贡献1条内容
所有评论(0)