css伪类nth-child与nth-of-type用法

:nth-child根据父元素下所有子元素的总顺序选择，不区分类型；:nth-of-type仅按同类型标签的顺序选择。例如p:nth-child(3)选第3个子元素中的p标签，而p:nth-of-type(2)选第2个p标签，忽略其他类型元素。

在CSS中，:nth-child 和 :nth-of-type 都是用来选择特定位置的子元素的伪类，但它们的计算方式不同，使用场景也有区别。

nth-child 用法

:nth-child(n) 是基于父元素下所有子元素的顺序来计算的，不管元素类型。只要该子元素是第 n 个孩子，就会被选中。

假设HTML结构如下：

<div><p>段落1</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><span>文字1</span><p>段落2</p><span>文字2</span><p>段落3</p></div>

使用 p:nth-child(3) 会选择第三个子元素，也就是第二个 <p>（“段落2”），因为它是父元素下的第3个孩子。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

注意：如果写成 p:nth-child(1)，则不会选中第一个 <p>，因为第一个孩子虽然是 <p>，但它确实是第1个孩子，所以会被选中。但如果第一个孩子是 <span>，那么 p:nth-child(1) 就不会生效。

nth-of-type 用法

:nth-of-type(n) 是针对同类型的标签进行计数。它只看当前标签类型在同类型中的顺序。

使用 p:nth-of-type(2) 会选择第二个 <p> 标签（“段落2”），因为它是在所有 <p> 标签中的第2个，不管它在整个子元素序列中排第几。

这个选择器更关注“同类元素”的位置，适合当你只想对某类标签（如所有段落或所有图片）中的第几个进行样式控制。

关键区别总结

• :nth-child 看的是父元素下所有子元素的总顺序，不区分标签类型。
• :nth-of-type 只看当前元素类型在同类中的顺序。
• 当结构复杂、多种标签混排时，:nth-of-type 更可靠。
• 如果所有子元素是同一类型，两者行为可能一致。

常见用法示例

选择奇数行和偶数行：

/* 奇数位置的孩子 */
li:nth-child(odd) { background: #f0f0f0; }
<p>/<em> 所有 p 标签中的偶数个 </em>/
p:nth-of-type(even) { color: blue; }</p>

使用公式 an+b，比如 2n+1 表示每隔一个选一个。

基本上就这些，理解它们的计数逻辑是关键。

以上就是css伪类nth-child与nth-of-type用法的详细内容，更多请关注php中文网其它相关文章！