:last-child匹配父元素最后一个子元素，适合纯li结构；:last-of-type只认同标签最后一个，更抗干扰；现代推荐用flex/grid的gap替代margin控制间距。
用 :last-child 或 :last-of-type 控制列表末尾元素的 margin-bottom
直接给列表项（如 li）统一加 margin-bottom: 16px，最后那个元素会多出一段无意义的空白——尤其当它紧贴父容器底部或下一个区块时，视觉上“掉下去一截”。这不是 bug，是盒模型自然结果。真正该做的是：只给非末尾项加底边距。
:last-child 是最常用的选择器，它匹配父元素中最后一个子元素，不管类型：
li { margin-bottom: 16px; }
li:last-child { margin-bottom: 0; }
但要注意：如果 li 后面还有其他元素（比如注释、空文本节点、div 分隔线），:last-child 就可能选不到真正的最后一个 li。这时 :last-of-type 更稳，它只看元素标签名：
li { margin-bottom: 16px; }
li:last-of-type { margin-bottom: 0; }
-
:last-child适合结构干净、ul或ol下纯li的场景 -
:last-of-type更健壮，能绕过中间插入的非li元素 - 两者都不兼容 IE8 及更早版本（但 2026 年基本可忽略）
- 不要写成
ul li:last-child冗余嵌套，直接li:last-child足够且性能更好
为什么不用 :not(:last-child)？
有人倾向写成：
li:not(:last-child) { margin-bottom: 16px; }
语法没错，但实际有隐患：
- 在部分旧版 Safari 和某些移动端 WebView 中，
:not()里嵌套伪类支持不一致，偶发失效 - 浏览器解析
:not(:last-child)比单独写两条规则略慢（虽微乎其微，但大规模列表渲染时可测出差异） - 当你需要为末尾项单独加样式（比如加一条下划线、改颜色），
:last-child { ... }比:not()更直观、可维护
所以除非你明确需要链式排除（比如 li:not(:last-child):not(.disabled)），否则优先拆成两行声明。
margin-bottom 折叠导致末尾间距“消失”怎么办？
即使写了 li:last-child { margin-bottom: 0; }，有时父容器底部还是没紧贴——因为 li:last-child 的 margin-bottom 和父 ul 的 padding-bottom 或 border-bottom 之间没发生折叠，但它的 margin-bottom 和后一个兄弟块（比如 section）的 margin-top 可能发生了折叠，把本该有的间隙吃掉了。
这时不能靠删 margin 解决，而要打断折叠：
- 给父
ul加padding-bottom: 1px（哪怕只是 1px，也能阻止外边距合并） - 或给
ul设置overflow: hidden（触发 BFC，隔离内外边距） - 或干脆放弃
margin-bottom，改用gap（见下一条）
用 display: flex 或 display: grid 替代 margin 控制列表间距
现代布局中，对齐和间距逻辑越来越脱离单个元素的 margin：
- 如果列表容器设为
display: flex; flex-direction: column;，直接用gap: 16px，它自动跳过首尾，不会在开头或结尾额外留空 - 同理，
display: grid; row-gap: 16px;效果一样，且支持响应式gap值 - 这两种方式完全规避了
margin折叠、:last-child匹配失败、IE 兼容性等所有老问题
但注意：gap 在 Flex/Grid 容器内部生效，对容器自身与外部元素的间距仍需靠 margin 控制——也就是说，你仍可能需要 ul { margin-bottom: 24px; } 来拉开跟下一个区块的距离。
真正容易被忽略的点是：很多人以为用了 :last-child 就万事大吉，却没检查父容器是否触发了 BFC、后续兄弟元素有没有带 margin-top、甚至 DevTools 里盒模型显示的“Computed”值是不是被更高优先级规则覆盖了。调样式时，先看 computed，再看 matched rules，比反复猜选择器更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
