：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)

<div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</div>
---------
p:nth-child(1){
color:red;
}

效果是这样的



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

<div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</div>
---------
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元素就行了

共勉