:last-child不生效是因为列表项后存在注释、空格等非标签节点；推荐用li:last-of-type或flex+gap方案替代。
:last-child 确实能去掉列表最后一项边框，但前提是它**真的是父容器的最后一个子元素**——这点经常被忽略，导致样式不生效。
为什么 :last-child 有时不生效？
常见原因是列表项（如 <li>）后面跟着其他元素：注释、空格文本节点、</ul> 之后的换行、甚至隐藏的 <div> 或脚本插入的内容。浏览器会把所有节点都算进“子元素”，只要 <li> 不是最后一个，:last-child 就不会匹配。
例如：
<ul> <li>A</li> <li>B</li> <li>C</li> </ul> <!-- 这个注释会让最后一个 <li> 失去 :last-child 匹配 -->
此时第三个 <li> 不是 <ul> 的最后一个子元素（</ul> 后的注释才是），所以 li:last-child 不会选中它。
立即学习“前端免费学习笔记（深入）”；
更可靠的写法：用 :last-of-type 替代
如果列表项标签统一（比如全是 <li>），:last-of-type 更稳定——它只看同类型元素的顺序，忽略文本节点或其它标签干扰。
-
li:last-of-type会选中最后一个<li>，不管后面有没有注释或空格 - 适用于
<ol>、<ul>、<menu>等标准列表容器 - 注意：如果列表里混用了
<li>和<div>，:last-of-type仍只认<li>类型，安全性更高
实际边框去除写法：
li {
border-bottom: 1px solid #ccc;
}
li:last-of-type {
border-bottom: none;
}现代方案：用 flex + gap 彻底绕过边框问题
如果目标只是“让列表项之间有间隔、末尾不留多余边框”，直接放弃边框+重置思路，改用布局级控制：
- 给父容器设
display: flex+flex-direction: column - 用
gap: 8px控制间距，完全不需要边框 - 兼容性已很好（Chrome 89+、Firefox 63+、Safari 14.1+）
- 无伪类匹配风险，也避免了边框重叠、盒模型计算等副作用
示例：
ul {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
margin: 0;
}
li {
margin: 0;
}真正要注意的不是“怎么写 :last-child”，而是检查 DOM 结构是否干净——哪怕多一个看不见的换行，都可能让选择器失效。用 :last-of-type 是最轻量的兜底，而 gap 是面向未来的解法。
