深入理解 nth-child 和 nth-of-type 的区别

ele:nth-of-type(n)  为什么叫 of-type ,就是说它是以“type”来区分的，也就是说ele:nth-of-type(n)指的是父元素下第n个ele元素。

ele:nth-child(n)      指的是父元素下第n个元素且这个元素是ele，若没有，则选择失败。

举例：

<style>
.div-parent span:nth-child(2){
color:red;
}
.div-parent span:nth-of-type(2){
color:yellow;
}
</style>
 
<div class="div-parent">
    <p>这是段落P</p>
    <span>这是span1</span>
    <span>这是span2</span>
</div>

结果为：

这是段落P

这是span1 这是span2

说明：

span:nth-child(2)   选择的是所有子元素中的第二个元素，这个元素必须是span

span:nth-of-type(2)  选择的是所有的span子元素中的第二个元素。

如果在nth-child 和 nth-of-type前不指定标签呢？

举例：

<style>
.div-parent :nth-child(2){
color:red;
}
.div-parent :nth-of-type(2){
color:yellow;
}
</style>
 
<div class="div-parent">
    <p>这是段落P1</p>
    <span>这是span1</span>
    <span>这是span2</span>
    <p>这是段落P2</p>
</div>

结果为：

这是段落P1

这是span1 这是span2

这是段落P2

说明：

:nth-child(2)   不管是否指定标签，:nth-child(2)选择的都是第二个子元素，只不过如果指定了标签，那第二个元素就必须是该标签元素，否则选择失败。

:nth-of-type(2)  它选中了两个元素，分别是父级.div-parent 下第二个p标签和第二个span标签，说明，:nth-of-type(2) 选择的是各个子类型标签的第二个元素。

最后，我们了解一下，:nth-child(n) 和 :nth-of-type(n) 括号中的n代表什么?

说明：

上述选择器中的n，可以是数字，关键字和公式

①  数字：前面举例已经说明了， 1就是第一个  、2就是第二个

② 关键字： odd 和 even 匹配下标是奇数或偶数的子元素关键字，第一个子元素下标是1，那odd就是第1，3，5，7...个子元素

③ 公式：就是一种算数表达式，表示周期，n是从0开始计数

比如  2n，就是下标是2的倍数的子元素，其实就等同于even

比如n+2，就是下标不小于2的子元素，其实就是第2，3，4，5，6...个

特别说明下面这个例子：

<style>
.div-parent .item:nth-of-type(2){
color:yellow;
}
</style>
 
<div class="div-parent">
    <p>这是段落P1</p>
    <span>这是span1</span>
    <span class="item">这是span2</span>
</div>

结果：

这是段落P1

这是span1 这是span2

说明：

.item:nth-of-type(2) ，指的是span2，就等同于   span:nth-of-type(2)。而 .item:nth-of-type(1)是无效的，选择失败。因为span1，没有这个类.item

所以说，如果 :nth-of-type(2) 前指定的元素是类，选择的是指定类对应的标签下的第二个元素，且这个元素的类是指定类。