:not(:last-child)失效主因是DOM结构不符预期，如存在注释、空白文本节点或非目标元素导致:last-child判定错误；应清理结构或改用.item:has(+ .item)等更鲁棒方案。
为什么 :not(:last-child) 加边框会失效
直接写 .item:not(:last-child) { border-bottom: 1px solid #ccc; } 看似合理，但常发现底边线没出现——根本原因是：如果 .item 是 display: flex 或 display: grid 的直接子元素，且父容器没设高度/内容撑开，浏览器可能把边框渲染在“看不见的区域”；更常见的是，:last-child 判定依赖 DOM 结构，若最后一个元素后面有注释、空格文本节点或伪元素，它就不是真正的最后一个 Element，导致 :not(:last-child) 误判。
:not(:last-child) 的正确写法与替代方案
优先确保结构干净：移除父容器内 .item 后的空白文本节点；若无法控制 HTML，改用更鲁棒的选择器：
- 用
:nth-last-child(2)向上找倒数第二个，再用~通用兄弟选择器连到之后所有（含倒数第一个）：.item:nth-last-child(2) ~ .item { border-bottom: 1px solid #ccc; } - 更推荐用
:is()+:has()组合（现代浏览器）：.item:has(+ .item) { border-bottom: 1px solid #ccc; }—— 表示“后面紧跟着另一个 .item 的元素”，天然排除最后一个 - 若需兼容旧浏览器，JS 补位更稳：
document.querySelectorAll('.item:not(:last-child)').forEach(el => el.style.borderBottom = '1px solid #ccc');
Flex/Grid 布局下边框错位的真实原因
当 .item 在 flex-direction: column 容器中，border-bottom 会叠加在元素自身底部，但若子元素有 margin-bottom 或父容器 align-items: center，视觉上边框可能被挤偏或截断。此时应：
- 统一用
gap替代margin-bottom控制间距，避免干扰边框定位 - 给
.item设box-sizing: border-box，确保border-bottom不撑高元素 - 检查是否意外设置了
overflow: hidden在父容器上，裁掉了边框
别忽略伪元素和空标签带来的干扰
:last-child 只认元素节点，不认文本节点。以下 HTML 中，div.item 实际不是 :last-child：
立即学习“前端免费学习笔记（深入）”；
<div class="list"> <div class="item">A</div> <div class="item">B</div> <!-- 注释 --> <span></span> </div>
此时 .item:not(:last-child) 会匹配全部两个 .item，因为 <span> 才是最后一个子元素。解决方法只有两个：
- 清理 HTML，删掉注释和无意义空标签
- 换用
:nth-of-type()（前提是所有.item都是同种标签，如全是<div>）：.item:nth-of-type(-n+2):not(:nth-of-type(2))这类写法太绕，不如直接 JS 或用:has()
真正难的不是写对选择器，而是确认你面对的 DOM 是否如你所想——打开开发者工具，用“选择器检查”逐层点开父容器子节点，比查文档更快定位问题。
