该用 :nth-of-type 而非 :nth-child 当需按同类型标签计数时；:nth-child 依赖子元素全局序号，含注释、文本节点等，易因结构不纯失效，而 :nth-of-type 只统计指定标签的顺序。
什么时候该用 :nth-child 而不是 :nth-of-type
关键区别在于计数逻辑： 常见误用场景：想给列表中第 2 个 最常踩的坑：在 实际布局中经常需要「除最后一项外都加右边框」或「前三个高亮，其余灰掉」，这类需求靠单个伪类不够，得组合或配合其他选择器。 / 前三项背景色不同，但最后一项无论是否在前三都优先应用红色 /
li:nth-child(-n+3) {
background: #eef;
}
li:last-child {
background: #fdd; / 这条会覆盖上面的，如果最后一项恰好也是第 3 个 /
} 注意层叠顺序：CSS 规则按书写顺序后写的生效，所以把 伪类不是万能的钩子，它们完全依赖 DOM 结构的“纯净度”。一旦模板里混入服务端注入的占位符、JS 动态插入的提示节点、或者 SSR 渲染时多出的空白文本，:nth-child(n) 看的是父元素下所有子元素的**位置序号**，不管标签名；而 :nth-of-type(n) 只统计**同类型标签**的位置。比如一个 里混着 、、，那么第二个 是第 3 个子元素，但它是 p:nth-of-type(2)，不是 p:nth-child(2)。 加样式，但父容器开头有注释节点或其它非 元素，这时 li:nth-child(2) 会失效——因为第 2 个子元素根本不是 。此时应改用 li:nth-of-type(2) 或确保结构干净。
:nth-child(2n) 选偶数位子元素（第 2、4、6…个）:nth-child(2n+1) 选奇数位（等价于 :nth-child(odd)）:nth-child(3n+1) 从第 1 个开始，每 3 个取 1 个（即 1、4、7…）
:last-child 的真实匹配条件和典型失效原因:last-child 只有当目标元素**恰好是父元素的最后一个子节点**时才生效。它不关心标签名，也不管前面有多少同类元素。，那最后一个 就不再是 :last-child 了——因为 不再是最后一个子元素。此时 li:last-child 完全不匹配。li:last-of-type，只要它是最后一个 就生效（哪怕后面还有 ）
Text 节点，导致 :last-child 错位组合使用
:nth-child 和 :last-child 控制边界样式/* 给除最后一项外的所有 li 加右分割线 */
li:not(:last-child) {
border-right: 1px solid #ddd;
}
:last-child 放在后面能确保它“赢”过 :nth-child 的通用规则。
:nth-child(n):last-child 这种冗余写法——:last-child 本身已隐含位置信息:nth-child(1) 和 :first-child 功能一致，但后者语义更清晰、兼容性更好（IE9+）:nth-child 会实时重算，但 JS 操作 DOM 后需留意是否触发重排移动端和旧版 Safari 中的兼容性陷阱
:nth-child 在 iOS Safari 8.0+ 和 Android Browser 4.4+ 基本可用，但早期版本（如 iOS 6/7）对表达式支持不全，2n+1 可能被忽略，只认 odd/even 字符串值。:last-child 兼容性好得多（IE9+），但在某些安卓 WebView（如 Crosswalk 10 以下）中，若父容器用 display: flex 且子元素有 
flex: 1
postcss-pseudo-class-any-link 或 autoprefixer 自动补全旧语法（但无法修复逻辑缺陷）:nth-child 和 :last-child 就容易悄悄失效——这种问题往往只在特定数据下暴露，很难复现。
