:last-child 是去掉列表最后一项边框的最直接解法，精准匹配父元素下最后一个子元素，兼容IE9+；若末尾有非目标元素干扰，则改用 :last-of-type 或改用 border-top + :first-child 方案。
用 :last-child 去掉列表最后一项的边框最直接
绝大多数情况下，:last-child 就是你要找的解法。它精准匹配父元素下最后一个子元素，只要你的列表项（比如 <li>）是连续、无其他兄弟节点干扰的，就能稳稳生效。
常见错误是写成 :last-of-type 或误以为要配合 nth-child 计算——其实没必要。只要结构干净，:last-child 最轻量、兼容性最好（IE9+ 支持）。
- 确保目标元素确实是其父容器的最后一个子节点（例如
<ul><li>A</li><li>B</li><li>C</li></ul>中的第三个<li>） - 如果列表末尾有注释、空格文本节点或其它 HTML 元素（如
<div class="footer">），:last-child会失效——此时得改用:last-of-type或重构 DOM - 边框通常来自
border-bottom，所以一般写：li:last-child { border-bottom: none; }
:last-of-type 是 :last-child 失效时的备选方案
当列表末尾混入了非 <li> 元素（比如一个 <p> 或注释），:last-child 就会选中那个“尾巴”，而不是最后一个 <li>。这时 :last-of-type 按标签类型筛选，更可靠。
但它也有坑：如果中间穿插了同类型元素（比如多个 <li> 后又来个 <li class="divider">），它仍会把最后一个 <li> 当作目标——这有时反而是你想要的；但若只想排除带特定 class 的项，就得换思路。
立即学习“前端免费学习笔记（深入）”；
- 典型适用场景：
<ul><li>Item 1</li><li>Item 2</li><p>Footer text</p></ul>→ 此时li:last-of-type仍能命中Item 2 - 注意：IE8 不支持
:last-of-type，如需兼容老 IE，只能靠 JS 或加 class 手动标记 - 不要滥用：
li:last-of-type和li:last-child在纯<li>列表里效果一致，优先选后者
用 border-top 替代 border-bottom 更省心
与其删最后一项的底边框，不如给除第一项外的所有项加顶边框。这样天然避开“最后一项特殊处理”的逻辑，代码更健壮，也更容易维护。
li {
border-top: 1px solid #ccc;
}
li:first-child {
border-top: none;
}这种写法对 DOM 结构零敏感：不管后面加不加新元素、有没有注释、是否动态插入，都自动适配。性能上也略优（浏览器渲染时少一次伪类重排判断）。
- 适用于所有垂直排列列表（
<ul>、<ol>、甚至<nav>里的<a>） - 水平列表可对称使用
border-left+:first-child - 如果已有
border-bottom样式且不能改，那还是回到:last-child方案
JavaScript 动态添加 class 是最后兜底手段
当 CSS 伪类完全不可用（比如需要兼容 IE7、或列表由 JS 拼接且结构混乱无法预测），才考虑用 JS 显式标记最后一项。
const listItems = document.querySelectorAll('ul li');
if (listItems.length > 0) {
listItems[listItems.length - 1].classList.add('last-item');
}然后在 CSS 里写 .last-item { border-bottom: none; }。这种方式可控性强，但引入了运行时依赖，破坏了样式与结构的分离原则。
- 仅建议用于遗留系统或极端动态场景（如实时增删列表项且频繁重绘）
- 注意：如果列表内容异步加载，需在数据渲染完成后再次执行该逻辑
- 现代项目中，应优先检查是否真有必要降级到 JS —— 大多数所谓“不兼容”其实是构建工具或 polyfill 配置问题
实际开发中最容易被忽略的是 DOM 结构的“隐形干扰”：看似干净的 HTML，可能因模板引擎注入空格、服务端渲染残留注释、或者 React/Vue 的 fragment/portal 导致 :last-child 失效。动手前先用浏览器开发者工具的“Elements”面板确认目标元素是否真是最后一个子节点。
