nth-of-type()和nth-child()的区别

一、:nth-of-type()

nth-of-type()定义和用法:
:nth-of-type(m)选择器匹配属于父元素的特定类型的第m个子元素的每个元素。
m 可以是一个数字、关键字或者是公式。

1.1、当m为数字时

有如下代码

<div class="nth">
    <h2>111111</h2>
    <p>第一段落</p>
    <h2>222222</h2>
    <p>第二段落</p>
    <h2>333333</h2>
    <p>第三段落</p>
</div>

css
.nth p:nth-of-type(3){
    background-color: red;
}

.nth h2:nth-of-type(2){
    background-color: aqua;
}

图片.png

这里我们可以看到一个类名为nth的盒子中有3个h2标签和3个p标签；在样式表中，我们首先可以通过nth找到类名（class）为nth的元素，再通过标签p、h2找出当前类中所有的p标签和h2标签；再根据nth h2:nth-of-type(m)中的m确定到标签的具体位置；从上往下的顺序排列。

1.2、当m为关键字

odd和even是可用于匹配下标是奇数或偶数的子元素关键词（默认的第一个为1）。
当样式表中改为

.nth p:nth-of-type(odd){
    background-color: red;
}

.nth h2:nth-of-type(even){
    background-color: aqua;
}

图片.png

意为下标为奇数的p标签背景颜色为红色，下标为偶数的h2标签背景颜色为青色。

1.3、当m为公式

使用公式（an + b），其中a表示周期长度，n是计数器（从0开始），b是偏移值。

.nth p:nth-of-type(2n + 1){
    background-color: red;
}

.nth h2:nth-of-type(2n){
    background-color: aqua;
}

图片.png

意为下标为奇数的p标签背景颜色为红色，下标为偶数的h2标签背景颜色为青色。

二、:nth-child()

:nth-child()选择器匹配属于其父类的第N个元素，不论元素的类型，N可以是数字、关键词或者公式，其关键词和公式同上。

<div class="nth">
    <h2>111111</h2>
    <p>第一段落</p>
    <h2>222222</h2>
    <p>第二段落</p>
    <h2>333333</h2>
    <p>第三段落</p>
</div>

css文件
.nth p:nth-child(2){
    background-color: aquamarine;
}

运行结果如下

图片.png

当css文件改为如下所示时

.nth p:nth-child(3){
    background-color: aquamarine;
}

运行结果如下

图片.png
如上面两个运行结果所示：p:nth-child(n)所指的是p元素所在父元素下的第n个元素（从上至下）;当第n个元素正好是p元素时，背景设置才会生效。