nth-of-type
和nth-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;
}
显然这是符合我们预期的,是广大人民群众喜闻乐见的情形。
二、通过common类名选择第3个.common
.common:nth-of-type(3) {
background: red;
}
同样也是符合我们预期的——选中拥有common类名的第三个元素。
可能有些朋友看到这,嘴角已经微微上扬,露出轻蔑而天真的笑容,心想:标题取得咋咋呼呼,结果都是些尝龟操作,不值一提不值一提~
好,那就来点不那么尝龟的!
三、通过common类名选择第1个.common
.common:nth-of-type(1) {
background: red;
}
是的,你没有看错,我的图也没错,她确实选中了第2个.common,什么原因呢?这个例子暂时看不出来,我们结合下面的第四个例子应该能看出些端倪。
四、通过common类名选择第2个.common
.common:nth-of-type(2) {
background: red;
}
有些朋友看到这更绝望了,明明括号里只有2没带n,却选中了2个!
刚刚露出天真笑容的朋友脸上的笑容凝固了,心想:nth-of-type变了,变得陌生了,不再是我认识的那个单纯的nth-of-type了。
但是朋友你不用垂头丧气,仔细观察会发现:这两个被选中的元素都是.common,但是他们的标签名却不同,而且恰好是各自标签名的第二个!
由此我们大胆推测:
nth-of-type以类名选择元素时,会根据第一个拥有此类名的元素的标签类型(假设为div)来确定候选元素的标签(div),即使元素未拥有此类名,但只要是此标签类型(div)就可成为候选元素,然后根据序列号在候选元素中确定一个元素,如果被确定的这个元素也拥有此类名则此元素被选中,否则不选中任何元素;
另外,若拥有此类名的元素标签类型不同,则将不同标签分组,分别应用上述规则。
根据这个结论,再看三、四两个例子,萦绕在我们眼前的迷雾渐渐消散了。
有些朋友可能会猛然想起第二个例子一开始就是符合我们原先的“想当然规则”的,但仔细对比会发现那只是个美丽的巧合,第二个例子仍然符合我们的推论,进一步证明了推论的正确性。