有关:nth-child()疑问解决

今天在使用:nth-child()这个伪类选择器时遇到了一些问题，填入的数字总是不能和自己理解的保持一致，仔细和其它同学讨论了一下才发现，自己之前对于:nth-child()的理解有误。

这是html部分

 

    
1
    
2
    
3
    
4
  

这是CSS部分

注意，nth-child()用法里填的数字，是.child在同级元素中的索引，而不是同类元素中的索引。所以只能填3，3的背景才会变红。

与之相应的：

nth-of-type()它是不看类选择器的，而是看类选择器的标签类，.child的标签是div，所以填入的数字是它在div标签中的同级索引，这里填1，3的背景才会变红。