:not(:last-child)是最直接兼容的方式，适用于同级元素样式排除；:nth-last-child(n+2)更稳定但IE8不支持；混合标签应优先用:last-of-type；动态场景推荐类名或JS兜底。
用 :not(:last-child) 排除最后一个子元素
这是最直接、兼容性最好的方式，适用于需要对除最后一个外的所有同级元素应用样式的场景。它依赖父容器的结构，要求目标元素是父元素的子元素且具有相同的层级关系。
-
:last-child匹配的是父元素中最后一个子节点，且该节点必须是目标元素类型（比如div）；如果最后一个子节点是p，而你要选div，那div:last-child就不会命中 -
:not(:last-child)会把所有「不是最后一个子元素」的同类型元素选出来，但要注意：如果中间夹杂了其他标签，可能意外排除不该排除的项 - 示例：
ul li:not(:last-child) { margin-right: 12px; }—— 给列表项加右间距，但最后一项不加
用 :nth-last-child(n+2) 更精准地跳过末位
当 :last-child 因为 DOM 结构不“干净”（比如末尾有注释、文本节点或无关标签）而失效时，这个写法更可靠。它从倒数第二个开始向前匹配，天然避开最后一个位置。
-
n+2表示从倒数第 2 个开始，一直到第一个，等价于「除了最后一个之外的所有」 - 比
:not(:last-child)更稳定，因为它不依赖当前元素是否恰好是:last-child，只看位置序号 - 兼容性略低：IE9+ 支持，但 IE8 不支持
:nth-last-child，若需兼容 IE8，只能回退到 JS 或结构调整 - 示例：
nav a:nth-last-child(n+2) { padding-right: 16px; }
避免误伤：注意 :last-of-type 和 :last-child 的区别
很多人混淆这两个伪类，导致排除失败。关键差异在于判断依据不同：一个是看「是否为同类型中的最后一个」，一个是看「是否为父元素中最后一个子节点」。
- 若父元素是
，那么
p:last-child不会匹配任何p（因为最后一个子节点是p？不，是C
p；但如果改成A
立即学习“前端免费学习笔记（深入）”；
BC
Dp:last-child就完全不匹配了） - 而
p:last-of-type总是匹配最后一个p元素，不管它后面还有没有别的标签 - 所以排除最后一个
p应该用p:not(:last-of-type)，而不是p:not(:last-child)，否则在混合标签结构下会漏掉本该排除的项
复杂嵌套中推荐用类名 + JS 做兜底
CSS 伪类在动态内容或 SSR/CSR 混合渲染场景下容易失准，尤其是当元素由 JS 插入、或服务端预渲染结构与客户端不一致时。
- 纯 CSS 方案无法感知「逻辑上最后一个」（比如按数据顺序排，但 DOM 顺序被重排），只能基于静态结构
- 如果业务逻辑明确知道哪个是末位（例如循环渲染时的
index === items.length - 1），直接加 class 如is-not-last最稳妥 - 临时补救可用 JS：
document.querySelectorAll('.item').forEach((el, i, arr) => { if (i !== arr.length - 1) el.classList.add('not-last'); });
实际项目里，:not(:last-child) 够用就别绕弯；但只要 DOM 可能掺杂非目标节点，或者需要跨浏览器兼容老版本，就得提前想好 fallback 路径。伪类看着简洁，但结构一变就失效，这点最容易被忽略。
