真正理解nth-of-type，只知道nth-of-type和nth-child的区别？怕是不够哦！

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

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

1.这是div
2.这是div.common
3.这是p.common
4.这是div.common
5.这是p.common

一、通过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）就可成为候选元素，然后根据序列号在候选元素中确定一个元素，如果被确定的这个元素也拥有此类名则此元素被选中，否则不选中任何元素；
另外，若拥有此类名的元素标签类型不同，则将不同标签分组，分别应用上述规则。

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

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