:nth-child会意外失效，因它按父元素所有子节点（含文本、注释、其他标签）物理序号匹配，若第2个子节点非p则p:nth-child(2)不生效；而:nth-of-type只统计同标签兄弟，更精准匹配“第n个p”。
什么时候用 :nth-child 会意外失效
常见现象：写好 p:nth-child(2)，但第二个 <p></p> 没变色，甚至完全不生效。
原因很直接：浏览器先数父元素下所有子节点（包括 <div>、<code><span></span>、文本节点、注释 <!-- -->），再检查“第 2 个是不是 p”。只要第 2 个是别的标签或空白，就匹配失败。
- HTML 中换行缩进产生的空格/换行，会被解析为文本节点，悄悄占掉一个序号
-
div:nth-child(3)可能命中的是<header></header>，只因它是第 3 个子节点 - 在 CMS 或 SSR 输出的 HTML 里，结构不可控，
:nth-child容易“失焦”
什么时候必须用 :nth-of-type
当你真正想表达的是“第 n 个 p”“第 3 个 img”，而不是“坐在第 n 个座位上的 p”——那就该用 :nth-of-type。
它会自动过滤出所有同类型兄弟元素（比如只看 p），然后在其中按顺序编号。前面插了几个 h2 或 div，完全不影响计数。
-
p:nth-of-type(2)在<h2></h2> <p>1</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></div> <p>2</p>中稳稳选中第二个p - 适合图文混排、卡片列表、表单字段组等真实项目结构
- 对 DOM 动态插入更鲁棒：在开头加个
<aside></aside>，:nth-of-type结果不变
:nth-child(odd) 和 :nth-of-type(odd) 的实际差异
两者语法一样，但语义完全不同：
-
tr:nth-child(odd)：表格中第 1、3、5… 行（含<thead>、<code><tbody> 所有 <code>tr），常用于整表隔行变色 -
tr:nth-of-type(odd)：只在同为tr的兄弟中数奇数位——但如果<tbody> 外还有 <code>tr，结果可能跨区域错乱 - 更安全的做法是限定作用域：
tbody tr:nth-child(odd)，既明确范围，又保持按视觉位置计数
容易被忽略的底层细节
两者都不匹配伪元素（如 ::before），也不把自闭合标签（如 <img>、<input>）当作“类型可计数”的兄弟——它们参与 :nth-child 计数，但不进入 :nth-of-type 的同类筛选池。
另外，IE9+ 支持二者，但 IE8 及更早版本完全不支持；性能上无差别，真瓶颈往往来自选择器嵌套过深或滥用通配符，而不是伪类本身。
