教你发现CSS3的"nth-child"和"nth-of-type"的区别！

对于初学者来讲，区别"nth-child"和"nth-of-type"是一个比较头疼的问题，为了更好帮助你们区别二者使用方法，特在此加以区分。

首先建立一个HTML结构。

<div class="post">
<p>我是文章的第一个段落</p>
<p>我是文章的第二个段落</p><!** ==我要变成第二个段落== **>
</div>

接下来,使用“:nth-child”和“:nth-of-type”选择段落并改变其文字颜色。

.post>p:nth-child(2){color:red;}
.post>p:nth-of-type(2){color:red;}

上面的代码都把“post”中的第二段文字变成了大红色，是否是表明这两个选择器就是同样的呢？其实否则。“nth-child”仅从字面上来解释，其实包含了两层意思。首先是一个段落元素，并且这个段落是父元素“div”的第二个子元素；而“nth-of-type”从字面上解释是“选择父元素div的段落二”。

上面一段话看起来是否是很晕，有没有更好方法来区分它们呢？~~~ 有的！把上面的HTML结构改变一下，在段落前加一个标题“h1”。

<h1>我是标题</h1>
<p>我是文章的第一个段落</p>
<p>我是文章的第二个段落</p><!** ==我要变成第二个段落== **>

前面的样式不变，但结构却彻底不一样了。“p:nth-child(2)”并无选择段落二，而是选择了段落一，从而没有达到须要的效果。

.post>p:nth-child(2){color:red;}/*第一个段落变成红色，不是咱们须要的效果*/

“nth-child(2)”选错了段落，但“p:nth-of-type(2)”却正常工做，选择仍是段落二，实现了想要的效果。

.post>p:nth-of-type(2){color:red;}/*第二个段落变成红色，是咱们须要的效果*/

若是在“h1”标题后面添加一个“h2”标题，此时“p:nth-child(2)”将没法选择任何元素，由于，此时“div”的第二个元素并非段落一“p”，因此没法选择任何元素。但“p:nth-of-type(2)”仍然能正常工做，由于选择的始终是“div”中第二个段落“p”。

你们只需记住一点：“nth-child”选择的是父元素的子元素，这个子元素并无指定确切类型，同时知足两个条件时方能有效果：其一是子元素，其二是子元素恰好处在那个位置；“nth-of-type”选择的是某父元素的子元素，并且这个子元素是指定类型。