根本原因是:last-child匹配dom中父元素最后一个子节点，而非视觉最后一项；常见干扰包括空文本节点、注释节点、包裹容器或父容器边框透出。
为什么直接写 li:not(:last-child) { border-bottom: 1px solid #eee; } 有时仍显示底边框
根本原因不是语法错，而是 :last-child 匹配的是 DOM 中父元素的**最后一个子节点**，而非你肉眼看到的“最后一项”。常见干扰包括：
- 列表末尾存在空格、换行符生成的文本节点（
或\n） - HTML 注释
<!-- footer -->被当作子节点 -
li被包裹在div或section里，导致:last-child匹配到那个容器而非li - 父容器上设置了
border-bottom，视觉上“透出”来，误以为是li自己的边框
验证方法：用浏览器开发者工具右键检查最后一项 → 查看 Computed 面板中 :last-child 是否为 true；若为 false，说明它没被选中。
li:last-child 和 li:last-of-type 怎么选
优先用 li:last-child —— 它更轻量、兼容性更好（IE9+），且语义清晰：只要 ul 下全是 li、无注释/空格/其他标签，就稳。
改用 li:last-of-type 的典型场景：
-
ul末尾有<p class="hint">提示</p>，此时li:last-child失效，但li:last-of-type仍能命中最后一个li - 列表中间穿插了
<li class="divider">，而你希望排除的是所有li类型里的最后一个（不管 class）
注意：li:last-of-type 在 IE8 不支持，如需兼容老环境，得靠 JS 或手动加 class="last"。
Flex/Grid 布局下 :not(:last-child) 为何失效
:last-child 永远按 DOM 顺序判断，和视觉顺序无关。你在 Flex 中用 order: -1 把某个 li 拖到最前，它在 DOM 里仍是原来位置，:last-child 不会跟着变。
实操建议：
- Flex 布局首选
gap：比如ul { display: flex; flex-direction: column; gap: 12px; }，彻底绕开边框逻辑 - 必须用边框时，改用相邻兄弟选择器
li + li：它选中“前面紧挨着另一个li的li”，天然跳过第一个，且不受order影响 - Grid 中若需每行最后一项无底边（如 3 列），用
li:not(:nth-child(3n)) { border-bottom: 1px solid #eee; }
移动端 1px 边框变粗或错位不是伪类问题
这是高 DPI 屏幕渲染导致的像素对齐异常。1px 在 Retina 屏可能被渲染为 2 物理像素，多条相邻 border-bottom 叠加后视觉加粗或模糊。
解决方向不是改伪类，而是优化边框本身：
- 用
transform: scaleY(0.5)缩放单侧边框（需配合origin控制锚点） - 改用
border-image或box-shadow模拟细线 - 更稳妥的做法：放弃
border-bottom，改用margin-bottom+ 分割线背景图 / 伪元素::after
真正容易被忽略的是：边框问题常被误归因为伪类逻辑，其实根源在设备像素比与渲染策略——先确认是否所有设备都复现，再决定动 CSS 选择器还是渲染层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
