:last-child 有时不生效是因为它只匹配 dom 中物理最后一个子节点，遇注释、空格文本节点、嵌套容器、父元素边框透出或 flex/grid order 调整均会失效；优先用 li:last-child（ie9+），混入非 li 元素时改用 li:last-of-type；更稳方案是 li + li { border-top: ... } 或 flex gap。
直接用 li:last-child { border-bottom: none; } 就能清除列表末尾边框，前提是结构干净、目标元素确实是父容器的最后一个子节点。
为什么 :last-child 有时不生效？
它只看 DOM 树中的物理位置，不认语义或视觉顺序。常见失效场景包括：
- 列表末尾有注释节点（
<!-- footer -->）或空格文本节点 -
li被包裹在div或其它容器里，导致:last-child匹配到那个容器而非li - 父元素设置了
border-bottom，样式“透出”来，看起来像li还有边框 - 使用了 Flex/Grid 布局且调整过
order，但:last-child不感知布局重排
li:last-child 和 li:last-of-type 怎么选？
优先用 li:last-child——它更轻量、兼容性更好（IE9+），且在纯 ul > li 结构中 100% 可靠。
改用 li:last-of-type 的典型情况：
- 列表末尾混入了非
li元素，比如<p class="hint">说明</p> - 你明确想忽略中间穿插的同类型干扰项（如带
class="divider"的li），但注意：IE8 不支持:last-of-type
比“删最后一项边框”更稳的写法
与其处理“例外”，不如让规则天然避开末尾：
- 统一用
li + li { border-top: 1px solid #eee; }—— 第一项没前驱，自然无顶边框 - Flex 布局下直接用
gap: 12px，彻底绕开边框逻辑 - 需要分隔线但不想碰边框？改用伪元素：
li:not(:last-child)::after控制高度、渐变、虚实线等
真正容易被忽略的点是：开发者工具里看到 :last-child 状态为 false，往往不是选择器写错了，而是 HTML 源码里藏着看不见的换行、空格或注释——删掉它们，样式立刻生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
