p:nth-of-type(n)更可靠，因它只计同类元素序号，忽略文本节点等干扰；而p:nth-child(n)按所有子节点排序，易受换行、空格等影响失效。

选“第几个p”却没生效？先看DOM里到底有几个“孩子”

根本原因不是语法写错，而是你没意识到HTML里那些看不见的节点也在参与计数。:nth-child(n) 数的是父元素下**所有子节点**：标签、换行符、空格、注释都算。比如 <div> <h2>标题</h2>\n<p>正文</p> </div> 中，\n 会生成一个 textNode，让 <p></p> 变成第 3 个子元素——此时 p:nth-child(2) 就失效了。

而 :nth-of-type(n) 完全不关心这些干扰项，它只收集所有 p 元素，然后取第 n 个。哪怕前面插了 5 个 div 和 3 条注释，p:nth-of-type(2) 依然稳稳命中第二个 p。

• 常见错误现象：p:nth-child(2) 在开发环境有效，上线后样式消失 → 很可能是构建工具压缩 HTML 或服务端模板插入了不可见节点
• 使用场景：纯列表（如 ul>li）用 :nth-child 没问题；但新闻卡片（h2+time+p+button）、表单组（label+input+span.error）必须用 :nth-of-type
• 参数差异：:nth-child(odd) 和 :nth-of-type(odd) 在混排结构中结果常不同，前者按总序号奇偶，后者按同类元素序号奇偶

button:nth-child(3) 和 button:nth-of-type(3) 哪个更严格？

button:nth-child(3) 更严格：它要求第 3 个子元素**必须是 button**，否则整个选择器不匹配任何元素。这适合明确需要“从上往下数第 3 个位置，且那里恰好放着按钮”的场景，比如固定布局的工具栏。

button:nth-of-type(3) 更宽容：它只要找到父元素下第 3 个 button 就行，不管它前面有多少 div、span 或空白文本。适合动态渲染的表单或卡片，按钮位置不固定但类型明确。

• 性能与兼容性无差别，现代浏览器解析逻辑一致
• 注意作用域：两者都只作用于**直接父元素的子节点**，section p:nth-of-type(2) 不会跨层找嵌套在 article 里的 p
• 容易踩的坑：误以为 article p:nth-child(2) 能选中 article 下第二层的 p —— 实际它只看 article 的直接子元素，如果第一个子是 header，第二个是 main，那这个选择器根本不会命中任何 p

为什么 p:nth-child(2) 有时选中第一个 p，有时选不中？

因为它的执行逻辑是两步：先定位第 2 个子元素，再判断它是不是 p。所以结果完全取决于 DOM 结构是否“干净”：

• 结构干净：<div> <p>1</p> <p>2</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:nth-child(2) 匹配第二个 p
• 结构含干扰：<div> <p>1</p> <span>sep</span><p>2</p> </div> → 第二个子元素是 span，p:nth-child(2) 不匹配任何元素
• 结构含文本节点：<div> <p>1</p>\n<p>2</p> </div> → 换行生成 textNode，p 变成第 3 个子元素，:nth-child(2) 失效

而 p:nth-of-type(2) 在这三种情况下始终匹配第二个 p，因为它跳过非 p 节点直接计数。

隔行变色该用哪个？tr:nth-child(even) 还是 tr:nth-of-type(even)？

绝大多数表格用 tr:nth-child(even) 就够了，因为 tbody 下通常只有 tr，没有其他类型节点。但一旦表格里混入 tr.group-header 或 tr.loading，:nth-child(even) 就会把它们也计入，导致样式错位。

这时得切到 tr:not([class*="header"]):nth-of-type(even) 或更稳妥的 tbody > tr:not(.group-header):nth-of-type(even) —— 因为 :nth-of-type 只数 tr，天然过滤掉非目标类型。

真正容易被忽略的点是：伪类匹配永远发生在选择器解析之后，不是递归遍历整棵树。写 .card p:nth-of-type(2) 时，它只看你写的那个 .card 元素的直接子 p，而不是所有后代 p。如果业务逻辑里需要“卡片内第二个段落”，但段落藏在 .content 里，就得写成 .card .content p:nth-of-type(2)，而不是指望伪类自动穿透层级。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！