根本区别就一句话：:nth-child(n)数父元素下所有子元素的总序号，:nth-of-type(n)只数同标签类型中的第几个；前者要求第n个子元素必须是目标标签，后者仅需在同类标签中排第n位，完全忽略中间混杂的其他节点。
根本区别就一句话：:nth-child(n) 数父元素下所有子元素的总序号，:nth-of-type(n) 只数同标签类型中的第几个。选不中元素？90% 是因为你没想清楚自己到底想“按位置选”还是“按类型顺序选”。
为什么 p:nth-child(2) 有时不生效
它要求两个条件同时满足：必须是父元素的第 2 个子元素，且该元素必须是 p 标签。
- 如果第 2 个子元素是
<span></span>、<!-- 注释 -->或换行产生的文本节点，哪怕后面有十个p，p:nth-child(2)也匹配不到任何元素 - DOM 中的空白文本节点（比如缩进换行）会被计入子元素总数，导致序号悄悄偏移——这是最常被忽略的坑
- 常见失效场景：图文混排、卡片组件里插了
<div> 或 <code><h3></h3>，p:nth-child(2)就会“失焦”为什么
p:nth-of-type(2)更鲁棒它先过滤出所有
p元素，再从中取第 2 个，完全无视中间夹杂的其他标签或空白节点。- 前面插了 3 个
<section></section>、2 个<span></span>和一堆换行？没关系，只要它是第 2 个p，就稳稳命中 - 适用于真实项目结构：新闻列表、表单字段组、富文本内容块——这些场景极少是纯
p堆叠 - 注意：
:nth-of-type不支持 IE8 及更早版本，但现代项目基本无需兼容
:nth-child和:nth-of-type都能用公式，但含义不同两者都接受
odd、even或(an + b)形式，但计数基础完全不同。-
p:nth-child(2n)：选所有位于偶数位置（2、4、6…）且恰好是p的子元素 -
p:nth-of-type(2n)：选所有p中序号为偶数的（第 2、4、6… 个p），不管它们在 DOM 中实际排第几 - 例如：
p:nth-of-type(3n+1)会命中第 1、4、7… 个p；而p:nth-child(3n+1)可能一个都不中，如果第 1、4、7 位根本不是p
真正难的不是语法，而是写选择器前那一秒的判断：你关心的是“这个
p在整行座位里的编号”，还是“它是第几个坐下的p”。前者用:nth-child，后者用:nth-of-type——错一次，样式就飘走，而且很难 debug。 - 前面插了 3 个
