首页 ›  文章

真正理解nth-of-type,只知道nth-of-type和nth-child的区别?怕是不够哦!

2019-08-16

nth-of-typenth-child的区别我这里就不说了,只说nth-of-type。

首先我们设定下面这样一个结构,然后通过下面四个例子真正理解nth-of-type

1.<div>这是div</div>
2.<div class="common">这是div.common</div>
3.<p class="common">这是p.common</p>
4.<div class="common">这是div.common</div>
5.<p class="common">这是p.common</p>

一、通过div标签选择第2个div

div:nth-of-type(2) {
    background: red;
}

clipboard.png

显然这是符合我们预期的,是广大人民群众喜闻乐见的情形。

二、通过common类名选择第3个.common

.common:nth-of-type(3) {
    background: red;
}

clipboard.png 同样也是符合我们预期的——选中拥有common类名的第三个元素。 可能有些朋友看到这,嘴角已经微微上扬,露出轻蔑而天真的笑容,心想:标题取得咋咋呼呼,结果都是些尝龟操作,不值一提不值一提~

好,那就来点不那么尝龟的!

三、通过common类名选择第1个.common

.common:nth-of-type(1) {
    background: red;
}

clipboard.png 是的,你没有看错,我的图也没错,她确实选中了第2个.common,什么原因呢?这个例子暂时看不出来,我们结合下面的第四个例子应该能看出些端倪。

四、通过common类名选择第2个.common

.common:nth-of-type(2) {
    background: red;
}

clipboard.png 有些朋友看到这更绝望了,明明括号里只有2没带n,却选中了2个! 刚刚露出天真笑容的朋友脸上的笑容凝固了,心想:nth-of-type变了,变得陌生了,不再是我认识的那个单纯的nth-of-type了。 但是朋友你不用垂头丧气,仔细观察会发现:这两个被选中的元素都是.common,但是他们的标签名却不同,而且恰好是各自标签名的第二个!

由此我们大胆推测:

nth-of-type以类名选择元素时,会根据第一个拥有此类名的元素的标签类型(假设为div)来确定候选元素的标签(div),即使元素未拥有此类名,但只要是此标签类型(div)就可成为候选元素,然后根据序列号在候选元素中确定一个元素,如果被确定的这个元素也拥有此类名则此元素被选中,否则不选中任何元素; 另外,若拥有此类名的元素标签类型不同,则将不同标签分组,分别应用上述规则。

根据这个结论,再看三、四两个例子,萦绕在我们眼前的迷雾渐渐消散了。

有些朋友可能会猛然想起第二个例子一开始就是符合我们原先的“想当然规则”的,但仔细对比会发现那只是个美丽的巧合,第二个例子仍然符合我们的推论,进一步证明了推论的正确性。

原文链接:segmentfault.com

上一篇:anchor-link-with-fixed-header
下一篇:H-项目记录-01:阿里百秀开发小结
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入