咋一看，：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元素
https://blog.csdn.net/huang_xiao_wei/article/details/53412805
扫一扫
1916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
