最稳妥方案是用li:not(:last-child)::after配合绝对定位实现分割线，既规避DOM结构干扰，又支持自定义位置与高DPI适配；若:last-child失效，需检查末尾注释/空节点，或改用:nth-last-child(1)、JS动态加类等替代方案。
用 ::after 加边框实现分割线，但末项不显示
直接给每个列表项加底部边框（border-bottom）最省事，但末项多出一条线，视觉上突兀。用 :not(:last-child) 选中除最后一项外的所有项，再加边框，是常见解法；但更稳妥的是用伪元素控制——尤其当列表项高度不一、或需自定义分割线位置（比如居中偏下）时。::after 可以完全脱离内容流，自由定位。
实操建议：
- 给列表项（如
<li>或<div class="item">）设置position: relative，为伪元素提供定位上下文 - 在
::after中设置content: ""、position: absolute、宽高和背景色（或border-bottom） - 垂直方向用
bottom: 0或top: 100%控制分割线位置，水平方向用left: 0和right: 0拉满 - 务必加
pointer-events: none，避免伪元素干扰点击区域
:last-child 失效？检查父容器和实际 DOM 结构
:last-child 匹配的是父元素的最后一个子节点，不是“最后一个列表项”。如果列表里混有注释、空文本节点、或意外插入的 </div> 标签，: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 影响。这点很关键：你调换了视觉顺序，但伪类选择器仍看源码顺序。
举个例子：
<ul class="list"> <li style="order: 3">C</li> <li style="order: 1">A</li> <li style="order: 2">B</li> </ul>
此时 li:last-child 仍匹配 “C”，不是视觉上排最后的 “B”。如果要按视觉顺序排除末项，只能靠 JS 计算真实渲染顺序，或改用 :nth-child(3) 这类基于位置的固定索引（前提是数量稳定）。
复杂点在于：当列表项动态增删、又用了 Flex 排序时，:last-child 的行为看似反直觉，但其实一直很诚实——它只认 HTML 里的位置，不猜你想干嘛。
