：nth-child(n)与：nth-of-type(n)的区别

：nth-child(n)与：nth-of-type(n)的区别

刚好用到，害怕忘了，写下记录下
刚开始的时候，在网上找发现是这样的

截图自：http://www.w3school.com.cn/cssref/css_selectors.asp

我日啊，你能说的再绕点吗。自己试吧。

这两个css选择器看起来差不多，但是在使用时候还是有不小的区别的。
如：使用:nth-child(n)

    
我是第1个p标签
    
我是第2个p标签

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

效果是这样的

而使用nth-of-type(n),代码如下

    
我是第1个p标签
    
我是第2个p标签

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

效果同nth-child()设置的一样

但是

如果稍微变一下html结构

<div>
    <h1>我是来凑热闹的h1>
    <p>我是第1个p标签p>
    <p>我是第2个p标签p>
div>
    ---------
p:nth-child(1){
color:red;
}

效果是这样的

没有标签被选中，再改一下里面的数字n

<div>
    <h1>我是来凑热闹的h1>
    <p>我是第1个p标签p>
    <p>我是第2个p标签p>
div>
    ---------
p:nth-child(2){
color:red;
}

有一个p标签又被选中了。

再用nth-of-type(n),代码如下：

<div>
    <h1>我是来凑热闹的h1>
    <p>我是第1个p标签p>
    <p>我是第2个p标签p>
div>
    ---------
p:nth-of-type(1){
color:red;
}

<div>
    <h1>我是来凑热闹的h1>
    <p>我是第1个p标签p>
    <p>我是第2个p标签p>
div>
    ---------
p:nth-child(2){
color:red;
}

总结一下

使用p:nth-child(n)得满足两个条件
1. 它的位置必须在它父元素的第n个，从1开始计数
2. 它必须是P元素（相对于p:nth-child(n)来举例）

而使用p:nth-of-type(n)就比较宽松了
- 只要它是第n个P元素就行了

共勉