nth-child 和 nth-of-type css 选择器的示例和区别是什么？

在开发过程中，我们不能总是操作DOM样式并分配类。显然这是荒谬的。我们正在尝试使用另一个选择器来替换类选择器。

例如：

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

我们在开发时经常会用到这些标签。现在我们需要制作第二个蓝李。有的同学认为可以在二里加一个班。其实css是这样写的，最终没有任何结构。更好的做法是这样写

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

上面的代码实现了想要的功能。有的同学可能会认为我开发时是用nth-anak来查找那个dom的。是的，那么上面的需求也可以这样实现

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

那么问题来了，这两个css选择器的效果是一样的吗？其实还是有区别的。了解它的功能，会方便我们的开发，因为之前只知道，不知道区别，导致开发过程中出现bug污染风格

nth-小孩子和typenth的区别

首先看一个例子？：

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

我们要选择上面的第二个p元素，然后我们使用这两个选择器来达到我们的效果

type实现：

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

渲染如下：

children选择器的实现：

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

渲染如下：

• nth - 选择器的子元素没有得到我们想要的结果。差异是显而易见的。 children这个选择器是相对于parent的，p:children(2)你可以理解为parent的第二个元素，它是标签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：留一个小陷阱。如果选择器写为part:nth-child(1) Effect

• while nth-of-type 选择器相对于

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

  本身♶,p:nth - of-type (2)

  该选项选择器表示所有标签中的第二个p下级p在父标签中。这个选择器会在父标签中搜索p标签，直到找到第二个，而不管第二个。有多少不同的同级元素有p标签，次——type必须定义某种类型，否则不会出现错误o罗罗。
  链接：https://juejin.im/post/5d1451176fb9a07f0052ebcf
  来源：掘金
  版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。