css 常用伪类详解_通过 :nth-child 和 :last-child 控制元素

立即学习“前端免费学习笔记（深入）”；

• 安全写法：用 li:last-of-type，只要它是最后一个
• 就生效（哪怕后面还有
  ）

• 调试技巧：在浏览器开发者工具中检查元素的「Computed」面板，看伪类是否出现在「Matches selector」列表里
• 注意空白文本节点也算子节点：换行缩进产生的空格/回车，在 dom 中可能生成 Text 节点，导致 :last-child 错位

组合使用 :nth-child 和 :last-child 控制边界样式

实际布局中经常需要「除最后一项外都加右边框」或「前三个高亮，其余灰掉」，这类需求靠单个伪类不够，得组合或配合其他选择器。

/* 给除最后一项外的所有 li 加右分割线 */ li:not(:last-child) {   border-right: 1px solid #ddd; } 
/ 前三项背景色不同，但最后一项无论是否在前三都优先应用红色 / li:nth-child(-n+3) { background: #eef; } li:last-child { background: #fdd; / 这条会覆盖上面的，如果最后一项恰好也是第 3 个 / }

注意层叠顺序：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，伪类可能错判“最后”位置。

• 稳妥做法：对关键视觉控制（如导航栏分隔线），用类名代替伪类，例如
• 测试建议：在真机上用 Safari 开发者工具远程调试，不要只信模拟器
• 构建时可借助 postcss 插件 postcss-pseudo-class-any-link 或 autoprefixer 自动补全旧语法（但无法修复逻辑缺陷）

伪类不是万能的钩子，它们完全依赖 DOM 结构的“纯净度”。一旦模板里混入服务端注入的占位符、JS 动态插入的提示节点、或者 SSR 渲染时多出的空白文本，:nth-child 和 :last-child 就容易悄悄失效——这种问题往往只在特定数据下暴露，很难复现。