p:nth-child(2)不匹配因先定位第2个子节点再判是否为p，若该位置是textNode、注释或其它标签即失效；p:nth-of-type(2)则忽略非p元素，只取第2个p，更稳定可靠。
为什么 p:nth-child(2) 有时不匹配任何元素
因为它的执行逻辑是两步：先定位父元素的第 2 个子节点，再判断它是不是 p。只要第 2 个子节点是 textNode（比如换行、空格）、comment、div 或 h2，整个选择器就失效——哪怕后面有十个 p，也一个都选不到。
常见翻车结构：
-
<div><h2>标题</h2>\n<p>第一段</p></div>→ 换行符生成 textNode，p实际是第 3 个子节点 -
<ul><!-- intro --><li>1</li><li>2</li></ul>→ 注释占位，li:nth-child(1)不匹配
为什么 p:nth-of-type(2) 更稳定
它不看位置，只做一件事：收集父元素下所有 p 元素，按文档流顺序编号，取第 2 个。中间插了 div、time、注释或 5 个空格，全被跳过。
适用场景明确：
立即学习“前端免费学习笔记（深入）”；
- 新闻卡片：
<h3>标题</h3><p>导语</p><time>2026-08</time><p>正文</p>→p:nth-of-type(2)稳稳命中「正文」 - 表单字段组：
label + input + span.error→ 要第 2 个input，必须用input:nth-of-type(2) - 表格数据行混入广告：
tr[data-role="item"]:nth-of-type(even)比tbody tr:nth-child(even)可靠得多
article p:nth-child(2) 根本不是你想象的意思
这个写法有严重误解：article p:nth-child(2) 并非“article 内部第二个 p”，而是“article 的直接子元素中，第 2 个子元素要是 p”。如果 article 子元素是 <header> 和 <main>，那它连 p 的边都碰不到。
真正想选 article 下第二个 p，得看层级：
- 如果
p是 article 直接子元素 → 用article p:nth-of-type(2) - 如果
p在<main>里 → 必须写article main p:nth-of-type(2)或加属性锚定 - 别用
article p:nth-child(2)，它既不递归也不跨层，纯属误导
.item:nth-of-type(2) 为什么永远不生效
:nth-of-type() 只认 HTML 标签名，完全无视 class、id 或属性。写 .item:nth-of-type(2)，浏览器会先找所有 .item 元素，再按它们的标签名分组计数——但 .item 不是标签名，所以整个选择器无效。
正确做法：
- 想选第二个带
class="item"的div→ 用div.item:nth-of-type(2) - 想选第二个带
data-role="card"的元素 → CSS 无原生支持，得用 JS：document.querySelectorAll('[data-role="card"]')[1] - 混排结构中依赖 class 排序？别硬扛，加一层 wrapper 或用
data-index属性更可控
真实 DOM 结构永远比公式重要。打开开发者工具，展开父容器，亲手数一遍子节点类型和顺序——这是唯一能避开所有陷阱的操作。
