CSS: nth-child 和 nth-of-type 的区别

child:  指的是标签，并没有指定类型

type: 指的是指定类型的标签

从:first-child  和  first-of-type 的对比可以看出区别

    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>


    <style>
      /*nth-child是针对所有不分类型的孩子元素，做选择的*/
      section :nth-child(1) {
        color: pink;
      }
      /*无法生效因为第一个孩子不是div*/
      body section div:first-child {
        color: skyblue;
      }

      /*nth-of-type是针对固定的孩子元素，做选择的*/
      section div:first-of-type{
        color: skyblue;
      }
    </style>

1.first-child 选择的是section的第一个子标签，但section 的第一个子标签不是div 所以选择失效

2.first-of-type选择的是section第一个div类型的子标签

所以效果如下：