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

:nth-child为当前元素中的位置 是第几个

<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>nth-child</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

span:nth-child(4) 选中的是第三个span标签 因为em标签也会被查进去

:nth-of-type为选中元素的第几个

<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>nth-of-type</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

span:nth-of-type(4) 选中的是第四个span标签 因为em标签不会被查进去