:nth-child(n)按父元素所有子元素总序号匹配，易受注释、空格等干扰导致失效；:nth-of-type(n)仅按同类型标签顺序计数，跳过异类元素，更稳定可靠。
nth-child(n) 为什么总选错元素？
因为它是“按座位号选人”，不挑类型，只认父元素下所有子元素的总序号。只要第 n 个子元素不是你写的标签名，样式就失效。
-
p:nth-child(2)要求：第 2 个子元素必须是p，哪怕前面插了h3、span或换行产生的空白文本节点，序号也会被占掉 - DOM 中的注释
<!-- -->、空格、textNode全算子元素，:nth-child会悄悄偏移 - 常见翻车场景：图文混排列表里写
p:nth-child(2)想选第二个正文，结果选中了第一个p（它恰好坐在第 2 号座位）
nth-of-type(n) 为什么更可靠？
它是“按学号选人”，只数同类型元素，其他标签和空白完全无视。你要第 2 个 p，它就给你第 2 个 p，不管前面塞了多少杂七杂八的东西。
-
p:nth-of-type(2)只遍历所有p标签，按出现顺序编号，h3、div、注释全被跳过 - 适合真实项目结构：新闻卡片里
h3+p+time交错；表单里label和input交替；列表里穿插广告div - 注意：
:nth-of-type不支持 jQuery 1.x–3.x 的原生选择器引擎（需用$().filter()替代）
odd/even 和 an+b 公式在两者间行为一致吗？
语法一样，但计数逻辑不同——这直接决定最终匹配结果。
-
p:nth-child(odd)：选父元素中第 1、3、5… 个子元素，且该元素必须是p；如果第 1 个是h3，第 3 个是span，那可能一个p都不中 -
p:nth-of-type(odd)：选所有p中第 1、3、5… 个，稳定命中奇数位的p，不受干扰 -
li:nth-of-type(3n+1)会选第 1、4、7… 个li；而li:nth-child(3n+1)可能因中间插入div导致第 4 个li实际坐在第 8 个位置，被跳过
什么时候必须用 nth-child？
只有当你明确依赖“绝对位置”时才需要它，比如表格行、纯列表、无混排结构。
立即学习“前端免费学习笔记（深入）”；
- 标准
table tr隔行变色：tr:nth-child(even)安全，因为tr通常连续排列，thead/tfoot是独立容器 - 纯
ul > li列表且中间绝无其他标签时，li:nth-child(3)和li:nth-of-type(3)效果相同 - 但一旦加了
li.header或li.ad，:nth-child就开始失准，:nth-of-type才是保底方案
实际写的时候别猜，先看 DOM 结构树：如果目标元素前面有别的标签或空白，优先试 :nth-of-type；如果结构干净且要严格按位置控制（比如动画序列帧），再考虑 :nth-child。浏览器兼容性没差别，但语义误用才是最大坑。
