:not(:last-child) 失效主因是 DOM 结构与预期不符，如嵌套 div 或存在空白文本节点导致 :last-child 判定错误；应确保目标元素为同一父级的直接子元素，并优先采用“统一加线+单独清除最后一个”的写法。
为什么 :not(:last-child) 加分割线经常失效
因为它的行为依赖于元素在 DOM 中的真实兄弟关系，而不是你“以为”的列表结构。常见错误是把 div 套在 li 外面、或中间插了注释/空格文本节点，导致 :last-child 判定错位。
比如：<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul> 能正常工作；但换成 <ul>
<div><li>A</li></div>
<div><li>B</li></div>
<div><li>C</li></div>
</ul> 就会全部加线——因为每个 div 都是 ul 的 :last-child，而 li 根本不直属于 ul。
- 确保目标元素是同一父容器的直接子元素
- 避免用
display: contents或visibility: hidden干扰选择器匹配（它们不改变 DOM 结构） - 用浏览器开发者工具的“Elements”面板确认
:last-child确实高亮了你预期的那个节点
:not(:last-child) 和 :first-child 搭配用更安全
单靠 :not(:last-child) 只能控制“末尾之前”的样式，但有时你需要首尾都留白、中间才加线。这时候硬塞 :not(:first-child) 容易冲突，不如拆开写：
li {
border-bottom: 1px solid #eee;
}
li:last-child {
border-bottom: none;
}
这种写法兼容性更好（:not() 在老版 Safari 里对伪类支持不稳定），逻辑也更直白：先统一加线，再显式去掉最后一个。
-
:not(:last-child)在 IE9+ 支持，但 IE9 不支持嵌套:not()，别写成:not(:last-child):not(:first-child) - 如果要用多条件排除，改用独立规则更可靠，比如
li:not(:first-child):not(:last-child)在部分安卓 WebView 里会失效 - 加线方向优先选
border-bottom，比border-top更少受父容器overflow或transform影响
Flex/Grid 布局下 :last-child 还管用吗
管用，但只看 DOM 顺序，不管视觉排列。Flex 的 order、Grid 的 grid-row 都不会改变 :last-child 的判定结果。
比如三个 div 设置了 order: 3, 1, 2，DOM 里第三个还是 :last-child，哪怕它视觉上排第一。
- 需要按视觉顺序排除？得用 JS 动态加 class，CSS 无解
- Grid 中若用
grid-template-areas拆散元素，只要它们仍是同级子元素，:last-child依然有效 - Flex 容器设了
flex-wrap: wrap，换行不影响选择器——:last-child不等于“最后一行最后一个”
替代方案：用 border-block-end 配合 flow-root 更健壮
现代 CSS 提供了语义更强的块流方向属性，比如 border-block-end，它始终指向内容流的末尾方向（对 LTR 就是 bottom，RTL 下自动变成 top），且不受 writing-mode 影响。
配合 display: flow-root 清除浮动干扰，能避免很多意外重绘问题：
li {
border-block-end: 1px solid #eee;
}
li:last-child {
border-block-end: none;
}
-
border-block-end在 Chrome 87+/Firefox 66+/Safari 14.1+ 支持，如需兼容旧版本，回退到border-bottom - 不用
:not()就能避开它的性能小开销（虽然微乎其微，但大量列表项时可测出差异） - 真正容易被忽略的是：如果列表项用了
margin-bottom，和border-block-end叠加会产生双倍间距，记得统一用 padding 控制留白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
