参考nth-of-type()和nth-child()的区别
一. nth-of-type()
nth-of-type(m)选择器匹配属于父元素的特定类型
的第m个子元素的每个元素。
注意: 这里是指定其特定类型的元素,不是任何类型
示例:
<div class="nth">
<h2>111111</h2>
<p>第一段落</p>
<h2>222222</h2>
<p>第二段落</p>
<h2>333333</h2>
<p>第三段落</p>
</div>
css
这里指定是 p 标签的第三个
.nth p:nth-of-type(3){
background-color: red;
}
这里指定是 h2 标签的第二个
.nth h2:nth-of-type(2){
background-color: aqua;
}
二. 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;
}