:last-child仅匹配同级同类型且排在最后的子元素，若DOM中存在其他标签或嵌套结构则可能失效；:last-of-type更宽松但仍有隐藏元素干扰风险；推荐用li+li等兄弟选择器反向添加边框，兼容性好且稳定。
直接用 :last-child 去掉最后一项的边框或间距，多数情况下能行，但得小心它只认“同级最后一个”，不是“列表最后一项”。
为什么 :last-child 有时不生效
它匹配的是父元素下**类型相同且排在最后的子元素**。如果列表项中间穿插了其他标签（比如 <div>、<p> 或注释），或者用了 <li> 但外面套了 <ul> 和 <div> 混合结构，:last-child 就可能选错目标，甚至完全不匹配。
- 常见错误现象：
border-bottom: 1px solid #ccc;加在每项上，但最后一项的边框没消失 - 使用场景：导航菜单、卡片列表、表单项分隔线
- 真正生效的前提是：所有目标元素是同一标签名、且连续、且是父元素的直系子元素末尾
:last-of-type 是更稳妥的替代方案吗
它比 :last-child 宽松一点——只要求“同类型中最后一个”，不苛求是否连续或是否紧邻结尾。比如父元素里有 <h2>、<p>、<div>、<div>，那么第二个 <div> 就是 :last-of-type。
- 适合混合 DOM 结构，比如 CMS 输出带标题/描述的列表项
- 但仍有坑：如果最后一项前面还有同类型元素（比如多了一个隐藏的
<div style="display:none">），它就不是“最后一个”了 - 性能影响极小，现代浏览器都支持，IE9+ 可用
更可靠的解法：用兄弟选择器反向控制
与其删最后一项的边框，不如给**前面每一项加底部边框**——也就是用 + 或 ~ 选择器，让每个非首项“响应前一项的存在”。这样逻辑更稳，不受 DOM 插入干扰。
立即学习“前端免费学习笔记（深入）”；
li + li {
border-top: 1px solid #eee;
}
- 这写法给从第二项开始的每个
<li>加顶部边框，视觉上等效于去掉最后一项的底部边框 - 完全避开“找最后一个”的难题，兼容性好（IE7+）
- 参数差异明显：
+只匹配紧邻的下一个兄弟，~匹配后面所有同级同类型元素；通常用+更精准 - 注意：如果列表项之间有空格文本节点（比如换行缩进），某些旧版 IE 可能误判，建议 HTML 中避免无意义换行
最麻烦的其实是动态渲染场景——比如 Vue/React 列表里某项被 v-if 或 key 控制显隐，此时 :last-child 的“最后”会随 DOM 实时变化，但人眼看到的“视觉最后一项”未必同步。这种时候，宁可加个 class 手动标记，也别赌伪类的稳定性。
