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

时间：2023-03-31 00:00:35 CSS

nth-of-type和nth-child的区别这里就不说了，只说nth-of-type。首先我们设置如下结构，然后通过下面四个例子来真正理解nth-of-type1。

这是div

2。这是div。common

3.这是p.common

4.这是div.common

5.Thisisp.common

1.通过div标签选中第二个divdiv:nth-of-type(2){background:red;}显然这符合我们的预期，是一种情况是大众喜欢看的。2.通过公共类名选择第三个元素common.common:nth-of-type(3){background:red;}也符合我们的预期——选择公共类名的第三个元素。可能有小伙伴看到了，嘴角微微上扬，露出一抹轻蔑无辜的笑容，心想：标题好扯淡，结果就是耍花招，不值一提，不值一提~好吧，那就来别这么有品位！3.通过commonclassname选择第一个.common.common:nth-of-type(1){background:red;}是的，你没看错，我的图也对，她确实选择了第二个A.common，为什么？这个例子暂时看不出来，不过结合下面第四个例子应该能看出一些端倪。4.通过公共类名选择第二个.common.common:nth-of-type(2){background:red;}。2！刚刚还露出天真的笑容的朋友脸上的笑容僵住了，心想：nth-??of-type变了，变得奇怪了，不再是我认识的那个简单的nth-of-type了。但是朋友们，你们不必沮丧。仔细观察会发现，选中的两个元素都是.common，只是它们的标签名不同，而且恰好是各自标签名的第二个！由此我们大胆推测：当nth-of-type按类名选择元素时，会根据第一个具有此类名称的元素的标签类型（假设为div）来确定候选元素的标签（div），即使元素没有这个类型的名称，但只要是这个标签类型（div），就可以成为候选元素，然后根据序号在候选元素中确定一个元素。如果确定的元素也有该类型名称，则选择该元素，否则不选择任何元素；另外，如果具有此类名称的元素标签属于不同类型，则将不同的标签分组并分别应用上述规则。基于这个结论，再看第三个和第四个例子，我们眼前的迷雾渐渐散去。有的朋友可能会突然想起，一开始第二个例子符合我们原来的“理所当然”，但仔细比较后会发现这只是一个美丽的巧合，第二个例子仍然符合我们的推断，这进一步证明了推论。正确性。