注意：:last-child 看的是父元素下的最后一个子元素

它匹配的是“在父容器中排在最后的那个同级子元素”，不关心是不是

立即学习“前端免费学习笔记（深入）”；

• 如果列表末尾有注释、空格文本节点或其它标签（比如 ），:last-child 可能不会命中
• 更稳妥的方式是用 :last-of-type（只看元素类型），但前提是列表里没有混入其它
• 类型的兄弟元素
• 若结构复杂，可考虑用 :nth-last-child(1)，效果等同于 :last-child，语义更明确

配合伪元素做特殊视觉效果

常见需求如最后一项后面不加“/”分隔符，或添加专属图标：

li::after { content: " / "; }
li:last-child::after { content: ""; }

或者给最后一项加一个徽章：

li:last-child { position: relative; }
li:last-child::after { content: "NEW"; background: #ff6b6b; color: white; font-size: 0.7em; padding: 2px 6px; border-radius: 4px; position: absolute; top: -8px; right: -8px; }

兼容性提醒

:last-child 在 IE9+ 和所有现代浏览器中都支持，移动端也完全没问题。如果项目还需兼容 IE8，就得用 JS 添加 class 或改用其他方案。