:last-child不生效是因为列表项后存在注释、空格等非标签节点；推荐用li:last-of-type或flex+gap方案替代。

:last-child 确实能去掉列表最后一项边框，但前提是它**真的是父容器的最后一个子元素**——这点经常被忽略，导致样式不生效。

为什么 :last-child 有时不生效？

常见原因是列表项（如 <li>）后面跟着其他元素：注释、空格文本节点、 之后的换行、甚至隐藏的 <div> 或脚本插入的内容。浏览器会把所有节点都算进“子元素”，只要 <code><li> 不是最后一个，:last-child 就不会匹配。

例如：

• A
• B
• C

此时第三个 <li> 不是 <ul></ul> 的最后一个子元素（ 后的注释才是），所以 li:last-child 不会选中它。

更可靠的写法：用 :last-of-type 替代

如果列表项标签统一（比如全是 <li>），:last-of-type 更稳定——它只看同类型元素的顺序，忽略文本节点或其它标签干扰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• li:last-of-type 会选中最后一个 <li>，不管后面有没有注释或空格
• 适用于 <ol></ol>、<ul></ul>、<menu></menu> 等标准列表容器
• 注意：如果列表里混用了 <li> 和 <div>，<code>: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 是面向未来的解法。