选第几个？先搞清“数谁”：:nth-child(n) 数父元素下所有子元素的总序号，:nth-of-type(n) 数同标签类型中的第几个；样式失效多因混淆“按位置选”与“按类型顺序选”。
选第几个？先搞清“数谁”
根本区别就一句话：:nth-child(n) 数的是父元素下**所有子元素的总序号**，:nth-of-type(n) 数的是**同标签类型中第几个**。样式不生效，90% 是因为没想清楚自己到底想“按位置选”还是“按类型顺序选”。
-
p:nth-child(2)：只认“第二个座位”，且必须坐的是p—— 如果第二个子元素是div或注释节点，哪怕后面有十个p，它也不匹配任何元素 -
p:nth-of-type(2)：不管前面插了多少h3、span或空格文本，只要它是父元素里出现的第二个p，就稳稳命中 - DOM 中存在文本节点（比如换行缩进产生的空白）、注释
<!-- -->或其他标签时，:nth-child的序号会悄悄偏移，而:nth-of-type完全免疫这类干扰
常见失效场景：混排结构下选错伪类
图文列表、新闻卡片、表单字段组等真实项目里，HTML 很少是纯 li 或纯 p 堆叠。一旦出现 h3、div、span 与目标标签交错，:nth-child 就容易“失焦”。
<article class="post">
<h3>标题</h3>
<p>导语段落</p>
<div class="meta">发布时间</div>
<p>正文第一段</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9881" title="Json Repair Kit"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Json Repair Kit" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9881" title="Json Repair Kit">Json Repair Kit</a>
<p>使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。</p>
</div>
<a href="/xiazai/skill9881" title="Json Repair Kit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>正文第二段</p>
</article>- 想给“第二个
p”加底色？写.post p:nth-child(4)看似对，但一旦.meta改成<span></span>或加了注释，序号就崩了 - 正确做法是
.post p:nth-of-type(2)—— 直接锁定“第二个段落”，与中间穿插什么完全无关 - 浏览器 DevTools 里右键检查元素 → 查看“Elements”面板中的实际子节点树（含文本节点），能立刻验证你写的
n对不对
参数行为一致，但基数完全不同
两者都支持 odd、even、3n+1 这类表达式，计算逻辑也一样（n 从 0 开始代入，结果 ≥ 1 才生效）。但关键在于：这个“n”是套在哪个集合上算的。
-
li:nth-child(odd)：在<ul></ul>的全部子节点中，取第 1、3、5… 个，且该节点必须是li -
li:nth-of-type(odd)：先提取所有li，再从中取第 1、3、5… 个 —— 即使它们在 DOM 中分别位于第 2、6、9 位 - 当父元素只有单一类型子元素（如标准
ul > li）时，两者效果相同；但只要混入其他节点，结果就会分道扬镳
调试建议：用 DevTools 快速验证选择逻辑
别靠猜。打开浏览器开发者工具，在控制台直接运行以下命令，能直观看到哪些元素被选中：
document.querySelectorAll('.news-list p:nth-child(2)') // 返回空 NodeList？说明第2个子元素不是 p
document.querySelectorAll('.news-list p:nth-of-type(2)') // 返回一个元素？说明确实是第2个 p- 注意：CSS 选择器里的空格、层级、拼写错误（比如写成
nth_chind）也会导致“不生效”，先排除这类低级问题 - 优先级冲突也可能掩盖效果，临时加
!important测试是否是权重问题，而非选择器本身失效 - 动态插入内容（如 JS append）会改变子元素序号，此时
:nth-child更脆弱；若需稳定定位类型，:nth-of-type是更鲁棒的选择
实际项目里最常被忽略的点：文本节点也算子元素。HTML 中两个标签之间的换行和缩进，在 DOM 中就是真实的 Text 节点，它会占据一个“孩子”位置——这正是 :nth-child 失效最隐蔽的原因。
