CSS3选择器:nth-child和:nth-of-type之间的差异

来源：互联网发布：温岭麻将胡头算法编辑：程序博客网时间：2024/05/02 19:50

咋一看，：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元素

0 0