CSS:nth-child与:nth-of-type有什么区别-css教程-PHP中文网

:nth-child(n)按所有子节点顺序计数，:nth-of-type(n)只按同标签元素计数；前者易受空白文本节点干扰，后者更稳定可靠。

css:nth-child与:nth-of-type有什么区别

想精准选中第几个 p 或第几个 li，却总被样式“跳过”或“错位”？问题大概率出在没分清 :nth-child 和 :nth-of-type 的计数逻辑——它们根本不是同一种“第几个”。

选第 2 个 `li` 却没生效？先看父元素下第 2 个子节点是不是 `li`

:nth-child(n) 只认“座位号”，不认“坐的是谁”。它先按顺序数所有子节点（包括文本、注释、div、span），再检查那个位置上的元素是否匹配选择器。

HTML 中若开头有换行缩进产生的空白文本节点，或插了 ，li:nth-child(2) 就可能指向一个 div，结果完全不生效
常见结构如 <ul> <li>1</li> <li>2</li> </ul> 看似干净，但只要编辑器自动加了换行，DOM 里就多了文本节点，序号就偏了
想强制让它工作？要么删掉所有干扰节点（不现实），要么改用 :nth-of-type

想选“第 2 个 `p`”，不管前面有多少杂七杂八的标签？用 `:nth-of-type`

:nth-of-type(n) 只统计同标签类型的兄弟元素。它跳过 h3、div、文本、注释，只给所有 p 编号：第一个 p 是 1，第二个是 2……

p:nth-of-type(2) 在 <div> <h3>标题</h3> <p>第一段</p> <span>说明</span><p>第二段</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div> 中稳稳命中第二个 p
它对真实项目更友好：新闻列表常混排 h2、img、p；表单字段组常穿插 label、div、input —— 这些都不影响 input:nth-of-type(3) 找到第三个输入框
注意：:nth-of-type 不识别 class 或属性，.btn:nth-of-type(2) 没有意义；它只认标签名（button、input、p 等）

`:nth-child(odd)` 和 `:nth-of-type(even)` 隔行变色效果不同？正常

两者计算基数不同，结果自然不同。比如父容器下有 <p></p> <div></div> <p></p> <p></p>：

p:nth-child(odd) 匹配第 1 个和第 3 个 p（因为它们分别位于第 1、第 3 个子位置）
p:nth-of-type(even) 匹配第 2 个和第 3 个 p（因为这是第 2、第 3 个 p 元素）
所以同一套规则，在混合结构里用错伪类，视觉节奏就全乱了

不写标签名直接用 `:nth-child(2)` 或 `:nth-of-type(2)`？后果很具体

省略前面的选择器，语义就变了：

:nth-child(2) 会选中父元素下**第二个子节点**，无论它是什么类型（可能是 p、div、甚至一段空格文本）
:nth-of-type(2) 会分别选中每种标签类型的第二个实例：第二个 p、第二个 div、第二个 span……全部命中
这种写法极少用于生产环境，除非你明确需要跨类型批量控制，否则极易引发意外样式覆盖

真正麻烦的不是语法记不住，而是 DOM 里那些看不见的文本节点和注释——它们让 :nth-child 的“第几个”悄悄偏移，而 :nth-of-type 对它们视而不见。调试时打开浏览器开发者工具的 Elements 面板，把鼠标悬停在父元素上，挨个点开子节点，才能看清“第几个”到底数到了谁。