nth-child计数包含所有子节点（含文本、注释），非仅标签元素；nth-of-type只计同类标签；动态渲染或dom插入会改变序号，应优先用nth-of-type或js加class控制。
nth-child 计数包含文本和注释节点
它不是只数 <li> 或 <div>，而是把父元素下所有子节点——包括换行、空格、<code><!-- 注释 -->——全算进去。哪怕你肉眼看不到，浏览器也当它们是真实子节点。
- 写
li:nth-child(2)，但 HTML 里<ul></ul>开头有换行或注释，那第一个<li>实际可能是第 3 个子节点，nth-child(2)就匹配不到任何<li> - 用开发者工具展开父元素，逐个点开子节点，确认目标元素是否真在第 n 个位置（注意灰色的 “#text” 和 “comment” 节点）
- 临时加
* { outline: 1px solid red; }，能直观看出每个子节点的边界和顺序
nth-child 和 nth-of-type 混淆导致语义错位
li:nth-child(2) 要求“父元素第 2 个子元素必须是 <li>”，而 li:nth-of-type(2) 只要找“第 2 个 <li>”，中间插多少 <p></p> 或 <div> 都不影响。<ul>
<li>结构如 <code><ul>
<div>intro</div>
<li>first</li>
<p>note</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<li>second</li>
</ul> 时：li:nth-child(2) 匹配第一个 <li>，li:nth-child(4) 才匹配第二个；但 li:nth-of-type(2) 直接命中第二个 <li>
nth-of-type，它更贴近“我要第 N 个同类元素”的直觉li:nth-child(2n) 是选位置为偶数的子元素，不是“每两个 <li> 里挑第二个”——这点常被误读动态渲染让 nth-child 的序号失效
React/Vue 中用 v-if 或 {condition && <div>} 控制显隐时，DOM 节点可能被移除或插入新层级，原来第 4 个子元素变成第 6 个，<code>nth-child(4) 就再也匹配不上。
-
display: none不影响计数，但节点被remove()或条件渲染彻底删掉，就会改变真实子节点数量 - 刷新页面后立刻打开 Elements 面板，检查目标元素是否还在你预期的那个序号位置
- 关键逻辑别依赖 CSS 序号：比如“只显示前 3 条”，JS 渲染时主动加
class="is-first"/class="is-hidden"更可控
选择器主干写错层级或类型
写 .list > li:nth-child(2) span 前，先验证 .list > li:nth-child(2) 能不能单独命中——如果它根本没选中任何 <li>，后面加 span 也没意义。
-
div .item:nth-child(2)意图选 class 为item的第二个子元素，实际匹配的是「某个<div> 下，它的第二个子元素且带 <code>item类」，而那个子元素很可能不是<div> <li>想控制 <code><li>，就该从li:nth-child(n)开始写，别把类名提前到主干前干扰类型判断 - 在 DevTools 的 “Computed” 面板里看样式是否被划掉，若被划掉，大概率是选择器压根没命中目标元素本身
真正麻烦的从来不是语法写错，而是你写的 HTML 看似干净，实际 DOM 里早被注释、换行、框架注入的 comment 节点搅成一团——nth-child 数的就是这个真实 DOM，不是你编辑器里缩进整齐的源码。
