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><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> <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></header> 和 <main></main>，那它连 p 的边都碰不到。
真正想选 article 下第二个 p，得看层级：
- 如果
p是 article 直接子元素 → 用article p:nth-of-type(2) - 如果
p在<main></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 结构永远比公式重要。打开开发者工具，展开父容器，亲手数一遍子节点类型和顺序——这是唯一能避开所有陷阱的操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
