如何实现列表项之间的分割线效果_利用CSS伪元素last-child排除末项
最稳妥方案是用li:not(:last-child)::after配合绝对定位实现分割线，既规避dom结构干扰，又支持自定义位置与高dpi适配；若:last-child失效，需检查末尾注释/空节点，或改用:nth-last-child(1)、js动态加类等替代方案。
用 ::after 加边框实现分割线，但末项不显示
直接给每个列表项加底部边框（border-bottom）最省事，但末项多出一条线，视觉上突兀。用 :not(:last-child) 选中除最后一项外的所有项，再加边框，是常见解法；但更稳妥的是用伪元素控制——尤其当列表项高度不一、或需自定义分割线位置（比如居中偏下）时。::after 可以完全脱离内容流，自由定位。
实操建议：
标签，
:last-child 就可能指向它们，导致样式没生效。
常见错误现象：
- 明明写了
li:not(:last-child) { border-bottom: 1px solid #eee; }，但最后一条仍有线
- 用浏览器开发者工具检查，发现
<li> 并非父容器的最后一个子节点
- Vue/React 动态渲染时，key 冲突或条件渲染残留空白节点，也会破坏
:last-child 判断
解决办法：优先用 :nth-last-child(1) 替代 :last-child（语义更明确），或改用 JavaScript 动态加类（如 is-last），再写 .item:not(.is-last)。
移动端适配时，分割线太细或发虚怎么办
在高 DPI 屏幕（如 iPhone Retina、安卓 2x 屏）上，1px 边框常被渲染成 0.5 物理像素，看起来模糊甚至消失。这不是 CSS 写错了，是设备像素比（dpr）导致的。
实操建议：
- 用
transform: scaleY(0.5) 配合 transform-origin: top 模拟 0.5px 线（仅适用于水平分割线）
- 更通用的做法：用
background-image: linear-gradient(to bottom, #eee 50%, transparent 50%)，并设 background-size: 100% 1px，这样能始终占满 1 物理像素
- 避免用
border-bottom: 0.5px —— 浏览器支持极差，多数会向上取整为 1px
用 Flex 或 Grid 布局时，:last-child 还可靠吗
Flex 和 Grid 不改变 DOM 结构，所以 :last-child 依然按 HTML 子节点顺序匹配，不受 order 或 grid-template-areas 影响。这点很关键：你调换了视觉顺序，但伪类选择器仍看源码顺序。
举个例子：
此时 li:last-child 仍匹配 “C”，不是视觉上排最后的 “B”。如果要按视觉顺序排除末项，只能靠 JS 计算真实渲染顺序，或改用 :nth-child(3) 这类基于位置的固定索引（前提是数量稳定）。
复杂点在于：当列表项动态增删、又用了 Flex 排序时，:last-child 的行为看似反直觉，但其实一直很诚实——它只认 HTML 里的位置，不猜你想干嘛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
