css选择器nth-child和nth-of-type的区别

前提

由于开发中咱们不能老是操做一个dom样式就给一个class显然这是不合理的，咱们尽可能用其它选择器去代替class选择器

举个例子：

<ul>
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li>我是第3个li标签</li>
    <li>我是第4个li标签</li>
</ul>
复制代码

开发中咱们会常常使用到这样标签，如今咱们须要让第二个li变蓝，有同窗就想到能够给第二个li加个class，其实这样写的css到最后是没有结构可言的，比较好的作法能够这样写

<style> li:nth-of-type(2){ color:blue; } </style>
复制代码

上述的代码就实现了咱们想要的功能，有同窗可能会想到，我开发中是使用nth-child去定位这样的dom的，那么上述的需求也能够这样实现

<style> li:nth-child(2){ color:blue; } </style>
复制代码

那么问题就来，这两个css选择器的做用是同样的吗？实际上仍是有差异，搞清楚它们的做用，方便的咱们的开发，由于我以前只是了解，不清楚它们的区别，致使开发过程不知不觉就出现样式污染的bug

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

首先咱们来看个例子🌰:

<div>
    <span>
      我是第一个span标签
    </span>
    <p>
      我是第1个p标签
    </p>
    <p>我是第2个p标签</p><!--我想选中的元素-->
  </div>
复制代码

咱们想要选中上述的第二个p元素，那接下来咱们用这两个选择器来实现咱们的效果吧

nth-of-type选择器的实现:

<style type="text/css"> p:nth-of-type(2){ color:red; } </style>
复制代码

效果图以下:

nth-child选择器的实现:

<style type="text/css"> p:nth-child(2){ color:red; } </style>
复制代码

效果图以下:

• nth-child这个选择器没有实现咱们想要的结果，这个差异就很明显就能够看出来了，nth-child这个选择器是相对于父级来讲的，p:nth-child(2)你能够翻译为父级的第二个元素而且是p标签，若是有就选中，不然就不选

举个例子：

<style> section>:nth-child(1){ color:red; } </style>
<section>
      <p>第一个p标签</p> <!--要选中的元素-->
      <div class="first">
        第一个div标签
         <div>我是第1个div标签的第一个子标签</div>
      </div>
      <div>我是第2个div标签</div>
      <div>我是第3个div标签</div>
      <div>我是第4个div标签</div>
  </section>
复制代码

效果图以下:

能够看到咱们没有明确选择器的具体类型，它就是匹配到第二个无论是什么标签

ps:留个小陷阱选择器若是写成 section :nth-child(1)会出现什么效果

• 而nth-of-type选择器是相对于本身来讲的，p:nth-of-type(2) 这个选择器的意思是在父级标签下全部的次级p标签中的第二个p，这个选择器会去找父级标签下的p标签直到找到第二个其间无论第二个p标签有多少不一样的兄弟元素,而且要nth-of-type指定具体类型,否则就报错

总结

咱们得清楚css伪类选择器的具体使用才能在写页面的时候少花功夫，避免样式污染和干扰，把更多的精力放在js层方面