咋一看,:nth-child和:nth-of-type 比较相似,但是两者区别还是比较大的。
先来看他们相似的地方:
<!--:nth-child-->
<style type="text/css">
p{border:1px solid red;height:20px;}
p:nth-child(2){background:blue;}
</style>
<!--:nth-of-type-->
<style type="text/css">
p{border:1px solid red;height:20px;}
p:nth-of-type(2){background:blue;}
</style>
<body>
<p>p1</p>
<p>p2</p><!--选中这个-->
</body>
两个选择的效果图相同,如下图:
但是在两个P标签前面加一个span标签,则两则选择的对象就不一样:
<body>
<span>span</span>
<p>p1</p>
<p>p2</p><!--选中这个-->
</body>
效果如下:
:nth-child(2)的效果
:nth-of-type(2)的效果
由效果图看出两则区别,用口水话解释下:
E:nth-child(2)有两个约束:
1、父级元素下的第二个元素
2、并且第二元素必须是E元素
E:nth-of-type(2)有一个约束:
1、父级元素下的第二个E元素,也就是说不管E元素前面有多少个其他元素,它只会找到第二个E元素