对于初学者来说,区别"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;}/*第二个段落变成红色,是我们需要的效果*/