:last-child 有时删不掉最后一个列表项的底边框，因为它匹配的是父元素中最后一个子元素且必须是同类型标签；若其后存在其他标签、注释或空元素，选择即失效。

为什么 :last-child 有时删不掉最后一个列表项的底边框

因为 :last-child 匹配的是父元素中「最后一个子元素」，且必须是同类型标签。如果列表项后面跟着

、

或注释节点，哪怕肉眼看不见，li:last-child 就会失效——它根本没选中你想要的那个 li。

• 常见错误现象：li 有底边框，但最后一项依然显示，开发者反复检查 HTML 结构却没发现末尾藏了个空
• 使用场景：导航菜单、垂直卡片列表、设置项列表等需要「仅内部项间有分隔线」的 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:last-of-type 可能选错目标。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 典型误用：在 ul 里插入
• 作说明项，结果 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 就可能悄悄失效——而这种失效往往只在某个分支流程里出现，很难复现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！