:last-child 有时删不掉最后一个列表项的底边框，因为它匹配的是父元素中最后一个子元素且必须是同类型标签；若其后存在其他标签、注释或空元素，选择即失效。
为什么 :last-child 有时删不掉最后一个列表项的底边框
因为 :last-child 匹配的是父元素中「最后一个子元素」，且必须是同类型标签。如果列表项后面跟着 <p></p>、<div> 或注释节点，哪怕肉眼看不见，<code>li:last-child 就会失效——它根本没选中你想要的那个 li。
- 常见错误现象：
li有底边框，但最后一项依然显示，开发者反复检查 HTML 结构却没发现末尾藏了个空<div></div> - 使用场景：导航菜单、垂直卡片列表、设置项列表等需要「仅内部项间有分隔线」的 UI
- 更稳妥的做法是改用
:nth-last-child(1)配合类型限定，比如li:nth-last-child(1 of li)（但兼容性差）；或直接换思路，用:not(:last-child)
:not(:last-child) 是更安全的边框控制写法
与其给每个 li 加底边框再删最后一个，不如只给「不是最后一个」的项加——逻辑反转后，对 DOM 结构变化完全免疫。
- 实操建议：
li:not(:last-child) { border-bottom: 1px solid #eee; }，简洁且抗干扰 - 注意点：IE 不支持
:not()里的伪类嵌套（如:not(:last-child)），但 IE11+ 支持基础写法；若需兼容旧版 IE，得回退到 JS 动态加 class - 性能影响几乎为零，现代浏览器对
:not()优化得很好，不必担心重绘开销
用 :last-of-type 替代时要注意标签语义陷阱
:last-of-type 看的是标签名，不是位置。如果列表里混用了 <li> 和 <li class="divider">，而你想删的是最后一个普通 li，那 li:last-of-type 可能选错目标。
- 典型误用：在
ul里插入<li class="footer">作说明项，结果li:last-of-type把它当成了“最后一个列表项”来处理 - 适用条件：仅当所有列表项严格为同标签 + 同语义，且无插入其他同类标签的可能时才可靠
- 对比
:last-child：它更“物理”，:last-of-type更“语法”，二者失效原因完全不同
真正省心的方案：用相邻兄弟选择器 li + li
不依赖“最后一个”，而是从第二个开始加顶边框，视觉上等效于“去掉第一个的顶边、去掉最后一个的底边”。这种写法天然规避所有伪类定位问题。
立即学习“前端免费学习笔记（深入）”；
- 实操示例：
li + li { border-top: 1px solid #eee; }，配合li { margin: 0; padding: 8px 0; }即可实现干净分隔 - 优势：零兼容性问题，CSS2 就支持；DOM 插入/删除任意项都不影响样式生效
- 小坑：如果列表项本身有上下 padding/margin，要小心边框和间距叠加导致视觉过重，建议统一用
border-top配合padding-top控制呼吸感
li + li 是最扛造的解法。伪类看着高级，但只要 HTML 模板里多一个空格、一行注释、一个动态插入的提示节点，:last-child 就可能悄悄失效——而这种失效往往只在某个分支流程里出现，很难复现。
