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

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

这是html部分

 <div class=parent>
    <h2>1</h2>
    <h2>2</h2>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>

这是CSS部分

<style>
    .parent > .child:nth-child(3){
      background:red;
    }
    
  </style>

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

与之相应的：

<style>
    .parent > .child:nth-of-type(1){
      background:red;
    }
    
  </style>

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