移动端列表边框重复的典型表现是最后一项底部多出多余边框，主因是每项均设border-bottom；应先统一设边框再用:last-child移除末项边框，但需注意dom结构约束及设备渲染差异。
移动端列表边框重复的典型表现
在移动端常见的垂直列表（比如商品卡片、菜单项）中，如果给每个 <li> 或 <div class="item"> 设置了 <code>border-bottom: 1px solid #eee，就会出现最后一项底部多出一条“多余”的边框——视觉上割裂、与容器底边重叠、甚至在 iOS Safari 中因像素对齐问题显得更粗。这不是 bug，而是样式逻辑的自然结果：每项都画下边框，最后一项也不例外。
用 :last-child 清除最后一项边框的正确写法
核心思路是「先统一设边框，再精准移除最后一项」。必须注意选择器的匹配精度和 DOM 结构约束：
-
:last-child匹配的是父容器中**最后一个子元素**，且类型必须一致（比如<li>的最后一个<li>），不是“最后一个带某 class 的元素” - 若列表末尾有注释、空格文本节点或其它非目标标签（如
<div class="footer">），<code>:last-child可能失效 - 推荐写法：
.list-item { border-bottom: 1px solid #eee; } .list-item:last-child { border-bottom: none; } - 避免写成
.list > div:last-child—— 如果父容器里混有其他<div>，就可能误杀 <h3>比 <code>:last-child更稳妥的替代方案当 DOM 不可控（比如 CMS 输出、第三方组件嵌套），或需要兼容老版本 Android WebView 时，
:last-child容易失灵。这时可考虑：- 改用
:nth-last-child(1)：语义相同但部分旧内核解析更稳定，写法为.list-item:nth-last-child(1) { border-bottom: none; } - 反向设置上边框：
.list-item:not(:first-child) { border-top: 1px solid #eee; }—— 完全规避“最后一项”问题，且天然适配动态增删 - 用 Flex + gap 替代边框：
display: flex; flex-direction: column; gap: 1px;并将背景色设为#eee，父容器背景设为内容色 —— 真正无边框、无伪类依赖
移动端特别要注意的渲染细节
即使 CSS 写对了，也可能因设备特性导致边框“看起来还在”：
- iOS Safari 对
1px边框会自动做 subpixel 渲染，有时border-bottom: none仍残留发虚线，建议加transform: translateZ(0)强制硬件加速重绘 - 某些安卓浏览器对
:last-child的重排不及时，列表动态加载新项后，新末项边框未清除，需手动触发element.offsetHeight或使用requestAnimationFrame延迟应用样式 - 如果列表项用了
box-sizing: border-box且高度固定，清除边框后可能造成高度跳变，建议统一用padding-bottom模拟间距，边框只用于分隔逻辑
:last-child够用，但别把它当银弹。DOM 结构、动态行为、设备渲染链路任何一个环节偏移，都会让这行代码失效。真正稳定的解法，往往是从布局模型层面绕开“最后一项”这个命题。 - 改用
