:last-child选中父容器最后一个直接子元素且匹配选择器，非同类元素末项；应优先用相邻兄弟选择器控制间距，注意Flex/Grid布局和display:contents对伪类的影响。
last-child 选中的是最后一个子元素，不是最后一个同类元素
很多人以为 :last-child 会选中某个类名的最后一个实例，比如 .item:last-child 想让所有带 .item 的元素里排最后的那个被选中——但实际它只看 DOM 树里的位置：必须是父容器的**最后一个直接子元素**，且同时匹配该选择器。
常见错误现象：.item 后面跟着一个 <div class="divider"></div> 或空 <p></p>，这时 .item:last-child 根本不会生效，因为最后一个子元素不是 .item。
- 用
:last-of-type替代？不行，它只认标签名（如li:last-of-type），对 class 无效 - 真正可靠的方式是改 HTML 结构，确保目标元素确实是父级的最后一个子节点
- 或者换用 JavaScript 动态加类，但这就脱离了纯 CSS 场景
margin-bottom 多余时，优先用 margin-top 统一控制间距
与其在每个元素上设 margin-bottom 再费劲删掉最后一个，不如统一只给后续兄弟元素设 margin-top。这样第一个元素没上边距，其余都有，末项自然不用处理。
使用场景：列表、卡片流、表单字段组等线性排列结构。
立即学习“前端免费学习笔记（深入）”；
-
.list-item + .list-item { margin-top: 12px; }—— 利用相邻兄弟选择器，简洁可靠 - 兼容性好，IE9+ 都支持，比
:last-child更稳 - 避免因 DOM 变动（比如插入新节点）导致样式错乱
伪类失效时先检查父容器和 display 类型
:last-child 在某些布局下会“失灵”，不是语法错，而是渲染逻辑变了。
常见错误现象：Flex 或 Grid 容器里，:last-child 仍能选中，但 margin 没效果；或用了 display: contents 后整个选择器不触发。
- Flex 容器中，子元素是 flex item，
:last-child依然有效，但若设置了margin-right而非margin-bottom，可能视觉上“没清除” - Grid 布局同理，注意方向与 margin 方向是否匹配
-
display: contents会让子元素脱离渲染树，父元素的“子元素”概念消失，:last-child失效
真要删末项 margin，:last-child 必须写全且无歧义
写法看似简单，但容易漏掉关键细节。比如 .item:last-child { margin-bottom: 0; } 看似没问题，但如果前面有更具体的选择器（如 .item.active { margin-bottom: 16px; }），它可能被覆盖。
性能影响小，但维护成本高：一旦 HTML 结构微调，样式就断。
- 务必确认选择器权重足够，必要时加
!important（虽不推荐，但有时比重构 HTML 更快） - 避免嵌套过深，如
.container > ul > li:last-child，增加耦合，也易被后续插入的 wrapper 破坏 - 如果项目用 CSS-in-JS 或原子化方案（如 Tailwind），直接用
last:mb-0这类工具类更安全
复杂点往往不在怎么写 :last-child，而在于你没法预判未来谁会在它后面加个注释节点、空标签或动态插入的广告位。
