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的区别，一个关注的子元素的位置，一个多了一个类型的限制。

总结：

可能我的语言让大家搞得有点艰涩难懂，哎，我还是一个前端的小鸟，等我到变成一个老鸟的时候可能我说的话会更加透彻，希望可以帮助到大家，谢谢

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

标签：

原文地址：http://www.cnblogs.com/gavinzzh-firstday/p/5748957.html