:not(:last-child)是最轻量可靠的末尾间距清除方案，适用于动态列表且结构为标准直接子元素关系的场景，但需注意其仅匹配dom结构末尾而非视觉末尾，且不兼容ie8。
:not(:last-child) 是目前最轻量、最可靠的末尾间距清除方案，前提是你的结构是标准的直接子元素关系，且不需要兼容 IE8 及更早版本。
什么时候该用 :not(:last-child) 而不是手动加 class
当你面对的是动态列表（比如由 JS 渲染的卡片、表单项或导航项），且每个子元素都需要统一的间隔，但末尾不能多出空隙时，:not(:last-child) 就比写 .item--no-margin-bottom 或用 JS 判断 length 后加 class 更干净。
- 它不依赖数据长度或渲染顺序，只看 DOM 实际结构位置
- 新增/删除子元素后无需改 CSS 或触发 JS 重算
- 避免在 HTML 中混入仅用于样式的 class，语义更纯粹
- 比相邻兄弟选择器（如
li + li）更容易理解意图
:not(:last-child) 和 :not(:last-of-type) 怎么选
关键区别在匹配逻辑：:last-child 找的是父容器里“排在最后一位的子元素”，而 :last-of-type 找的是“同类型标签中最后一个”。
- 如果父元素下只有同一种标签（如
ul > li），用li:not(:last-child)更直接 - 如果父元素内混排（如
article里有h2、p、blockquote），想只给段落之间加间隔，就该用p:not(:last-of-type) - 别用
*:not(:last-child)—— 通配符性能差，且容易误伤非预期元素
常见翻车现场和避坑点
这个选择器看着简单，但几个细节一错，效果就偏了。
-
:not(:last-child)不受order、float或 grid placement 影响，它只认原始 HTML 顺序。如果你用flex改了显示顺序，但 DOM 没变，最后一个子元素仍是它认定的 “last” - 隐藏元素（
display: none）仍会被计入位置判断，所以如果末尾有个div被隐藏了，最后一个可见的p还是可能被漏掉 - IE9+ 全支持，但 IE8 不支持
:not()和:last-child，老项目需 fallback 到li + li或 JS 控制 - 不要写成
li:not(:last-child):not(.disabled)来排除禁用项——:not()链是 AND 关系，但.disabled是类名，不是伪类，语法错误；正确写法是li:not(:last-child):not(.disabled)（需确保浏览器支持多参数:not()，现代浏览器 OK，IE 不行）
真正难的不是写对这行 CSS，而是想清楚：你要控制的是“结构末尾”，还是“视觉末尾”；是“所有子元素”，还是“某类子元素”。选错锚点，后面再调 margin 或 gap 都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
