该用 :nth-of-type 而非 :nth-child 当需按同类型标签计数时；:nth-child 依赖子元素全局序号，含注释、文本节点等，易因结构不纯失效，而 :nth-of-type 只统计指定标签的顺序。
什么时候该用 :nth-child 而不是 :nth-of-type
关键区别在于计数逻辑：:nth-child(n) 看的是父元素下所有子元素的**位置序号**，不管标签名；而 :nth-of-type(n) 只统计**同类型标签**的位置。比如一个 <div> 里混着 <p>、<span>、<p>，那么第二个 <p> 是第 3 个子元素，但它是 p:nth-of-type(2)，不是 p:nth-child(2)。
常见误用场景：想给列表中第 2 个 <li> 加样式，但父容器开头有注释节点或其它非 <li> 元素，这时 li:nth-child(2) 会失效——因为第 2 个子元素根本不是 <li>。此时应改用 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 只有当目标元素**恰好是父元素的最后一个子节点**时才生效。它不关心标签名，也不管前面有多少同类元素。
最常踩的坑：在 <ul> 末尾加了 <div class="footer">，那最后一个 <li> 就不再是 :last-child 了——因为 <li> 不再是最后一个子元素。此时 li:last-child 完全不匹配。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：用
li:last-of-type，只要它是最后一个<li>就生效（哪怕后面还有<div>） - 调试技巧：在浏览器开发者工具中检查元素的「Computed」面板，看伪类是否出现在「Matches selector」列表里
- 注意空白文本节点也算子节点：换行缩进产生的空格/回车，在 DOM 中可能生成
Text节点，导致:last-child错位
组合使用 :nth-child 和 :last-child 控制边界样式
实际布局中经常需要「除最后一项外都加右边框」或「前三个高亮，其余灰掉」，这类需求靠单个伪类不够，得组合或配合其他选择器。
/* 给除最后一项外的所有 li 加右分割线 */
li:not(:last-child) {
border-right: 1px solid #ddd;
}
<p>/<em> 前三项背景色不同，但最后一项无论是否在前三都优先应用红色 </em>/
li:nth-child(-n+3) {
background: #eef;
}
li:last-child {
background: #fdd; /<em> 这条会覆盖上面的，如果最后一项恰好也是第 3 个 </em>/
}注意层叠顺序：CSS 规则按书写顺序后写的生效，所以把 :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，伪类可能错判“最后”位置。
- 稳妥做法：对关键视觉控制（如导航栏分隔线），用类名代替伪类，例如
<li class="not-last"> - 测试建议：在真机上用 Safari 开发者工具远程调试，不要只信模拟器
- 构建时可借助 PostCSS 插件
postcss-pseudo-class-any-link或autoprefixer自动补全旧语法（但无法修复逻辑缺陷）
伪类不是万能的钩子，它们完全依赖 DOM 结构的“纯净度”。一旦模板里混入服务端注入的占位符、JS 动态插入的提示节点、或者 SSR 渲染时多出的空白文本，:nth-child 和 :last-child 就容易悄悄失效——这种问题往往只在特定数据下暴露，很难复现。
