:last-child失效是因为它只匹配DOM中父元素的最后一个子节点，不感知视觉换行；flex/grid布局下最后一行元素无法用:last-child、:last-of-type等结构伪类识别，需改用gap、justify-content或:nth-child计算定位。
为什么 :last-child 在最后一行失效
它只认“父元素的最后一个子节点”，不关心是否在视觉上的“最后一行”。比如用 display: flex; flex-wrap: wrap 排列 12 个 .item，每行 4 个，第 12 个确实是 :last-child，但第 9、10、11 个也在最后一行——它们不会被匹配到。更糟的是，如果末尾加了个 <div class="spacer"></div>，:last-child 就直接指向那个空 div，样式完全失控。
:nth-of-type 和 :last-of-type 也解决不了最后一行问题
这两个伪类只按“同标签类型在父级中的顺序”匹配，和换行、容器宽度、flex 折行逻辑毫无关系。它们能精准选中“第 n 个 p”或“最后一个 li”，但无法感知浏览器渲染后哪几个元素实际落在了物理最后一行上。所有基于“类型+序号”的结构性伪类，本质都是静态 DOM 层面的筛选，不是渲染层的几何判断。
真正能控制最后一行边距的只有两种方式
— 必须放弃纯 CSS 结构伪类，转向布局模型本身的对齐能力：
-
display: flex+justify-content: space-between+margin-right: auto：给最后一行的最后一个元素加margin-right: auto，它会把右侧剩余空间全吃掉，等效于“右对齐”，从而让整行左贴边； -
display: flex+justify-content: flex-start（默认）+ 手动清除最后一行干扰：如果用margin-right做列间距，就用:not(:nth-child(4n))控制前三个（假设每行 4 个），这样最后一行不管剩几个，都不会多出右边距； - 别碰浮动：
float根本没有“最后一行”概念，清浮动后text-align: center也只能居中整行，不能控制单个元素边距。
关键点在于：CSS 没有“获取最后一行元素”的选择器。所谓“优雅”，是选对布局模型，而不是在伪类上硬拗。一旦用了 flex 或 grid，就该用它们原生的对齐和间隔机制，而不是倒回去找结构伪类补漏。
立即学习“前端免费学习笔记（深入）”；
