nth-of-type与nth-child的区别两者都是选择标签，但是又不完全相同，区别如下 nth-of-type：是

两者都是选择标签，但是又不完全相同，区别如下
nth-of-type：是当前元素的兄弟元素的第n个。
nth-child：是当前元素的兄弟节点的第n个。
一个是元素，一个是节点，这个就是他们的区别。

举个例子：

   <style>
        li:nth-child(4) {
          color: pink;
        }

        li:nth-of-type(4) {
          color: cyan;
        }
  </style>
    
  <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <h7>HELLO</h7>   //在li中间添加一个h7标签
        <li>3</li>
        <li>4</li>
      </ul>
 </body>

我们来看看结果就知道了

li:nth-child(4)选择的其实是第三个li;
li:nth-of-type(4)选择的是第四个小li。

这下就知道区别了吧！li:nth-child不区分元素类型，而li:nth-of-type可以区分type。