CSS3 :nth-child() 、:nth-of-type()选择器对比

本文链接：https://blog.youkuaiyun.com/weixin_43144209/article/details/121374128

本文详细介绍了CSS中的p:nth-child(2)与p:nth-of-type(2)选择器的使用方法及区别，通过实例展示了如何选择特定位置的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 元素。

p:nth-of-type(2)

选择属于其父元素第二个 元素的每个 元素。

nth-child使用

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

运行结果：

解释：p:nth-child(2) 定义为选择其父元素的第二个子元素的每个p元素。上文代码中的父元素为body，body的第一子元素是h1，第二个子元素是第一个段落。

nth-of-type使用

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

运行结果：

解释： p:nth-of-type(2) 定义为选择属于其父元素第二个 元素的每个 元素。上文代码中父元素为body，筛选body下的p元素并选择第二个