CSS选择器中nth-child和nth-type-child的区别

   在CSS里选择父元素下的第几个子元素咱们能够用的方法有nth-child 和nth-of-type，刚开始用的时候以为这两个应该效果的用法应该是同样的，可是为何CSS会定义两个同样的选择器呢？今天我来说讲本身的看法，不喜勿喷；

  如今来谈谈他们之间的差异：

代码结构以下（1）：

<section>
    <p>第1个</p>
    <p>第2个</p>
    <p>第3个</p>
    <p>第4个</p>
</section>

咱们如今使用两种方法来测试：

section p:nth-child(2){
            color: red;
        }

效果：

效果显而易见

如今试一试nth-of-type：

  section p:nth-of-type(2){
            color: red;
        }

 

毋庸置疑，在第一种结构下，这两种选择器均可以很好的选择到第二个元素。好那么接下来咱们来试试第二种结构：

<section>
    <div>哈哈哈</div>
    <div>呵呵呵</div>
    <div>嘻嘻嘻</div>
    <p>第1个</p>
    <p>第2个</p>
    <p>第3个</p>
    <p>第4个</p>
</section>

首先咱们来试一试nth-of-type的效果：

  section p:nth-of-type(2){
            color: red;
        }

效果：

ok接下来咱们来看看nth-type的效果：

section p:nth-child(2){
            color: red;
        }

效果：

看到这种结果，你们应该知道他们俩的区别在哪里了吧？

第一种father-ele ele：nth-child

我们单单从字面上来理解：father-ele元素下的ele元素的第n个元素。限制性挺强的，有位置限定，有元素限定，还有在父元素结构里的位置限定，那么我们来分析一下刚才的代码：

section p:nth-child(2){
            color: red;
        }

为何这个样式并无实现：再来看一下代码结构

<section>
    <div>哈哈哈</div>
    <div>呵呵呵</div>
    <div>嘻嘻嘻</div>
    <p>第1个</p>
    <p>第2个</p>
    <p>第3个</p>
    <p>第4个</p>
</section>

ok，如今我来组织一下个人语言，哈哈。

咱们来分析一下这个html结构，section下有7个子元素，排行第二的是一个div内容是呵呵呵。

如今来看css代码：他是要找，section地下的第二个元素，还要是p元素，可是呢，这里不知足条件，因此就没有样式的改变。（你们懂我什么意思了吗）

ok咱们来看下一种：

 section p:nth-of-type(2){
            color: red;
        }

其实哈，差异就在type上：

这个代码的意思是什么呢，1：section下的p元素，ok找到了，有两个。2：第二个p元素。ok找到了，干掉它，bingo样式改变了。

nth-of-type和nth-child的最大区别是什么呢，就是一个type的区别，一个关注的子元素的位置，一个多了一个类型的限制。

总结：

可能个人语言让你们搞得有点艰涩难懂，哎，我仍是一个前端的小鸟，等我到变成一个老鸟的时候可能我说的话会更加透彻，但愿能够帮助到你们，谢谢