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

因为开发中我们不能总是操作一个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-type-of的区别

首先我们来看个例子:chestnut::

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

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

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

<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层方面