阅读 386

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

关注下面的标签,发现更多相似文章
评论