css选择器nth-child和nth-of-type的实例与区别在哪？

开发中我们不能总是操作一个dom样式就给一个class显然这是不合理的，我们尽量用其它选择器去代替class选择器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

举个例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

开发中我们会经常使用到这样标签，现在我们需要让第二个li变蓝，有同学就想到可以给第二个li加个class，其实这样写的css到最后是没有结构可言的，比较好的做法可以这样写文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

上述的代码就实现了我们想要的功能，有同学可能会想到，我开发中是使用nth-child去定位这样的dom的，那么上述的需求也可以这样实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

那么问题就来，这两个css选择器的作用是一样的吗？实际上还是有差别，搞清楚它们的作用，方便的我们的开发，因为我之前只是了解，不清楚它们的区别，导致开发过程不知不觉就出现样式污染的bug文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

首先我们来看个例子?:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

我们想要选中上述的第二个p元素，那接下来我们用这两个选择器来实现我们的效果吧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

nth-of-type选择器的实现:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

效果图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

nth-child选择器的实现:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

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

效果图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

• nth-child这个选择器没有实现我们想要的结果，这个差别就很明显就可以看出来了，nth-child这个选择器是相对于父级来说的，p:nth-child(2)你可以翻译为父级的第二个元素并且是p标签，如果有就选中，否则就不选

举个例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

<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>
复制代码

效果图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

可以看到我们没有明确选择器的具体类型，它就是匹配到第二个不管是什么标签ps:留个小陷阱选择器如果写成 section :nth-child(1)会出现什么效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18130.html

• 而nth-of-type选择器是相对于自己来说的，p:nth-of-type(2) 这个选择器的意思是在父级标签下所有的次级p标签中的第二个p，这个选择器会去找父级标签下的p标签直到找到第二个其间不管第二个p标签有多少不同的兄弟元素,并且要nth-of-type指定具体类型,不然就报错