:last-child选择器可精准选中父元素下最后一个子元素并单独设置样式，如取消导航栏最后一项的右边框；需确保目标元素确为父元素最后一个子节点，否则可用:last-of-type或:nth-last-child(1)替代。
直接用 :last-child 选择器就能精准选中列表的最后一项，然后单独设置样式，不需要额外加 class 或改 html 结构。
基础用法：给最后一项加不同边框
比如常见的横向导航栏，想让最后一项右边不显示竖线：
css 示例：
nav ul li { border-right: 1px solid #ccc; }
nav ul li:last-child { border-right: none; }
这样只有最后一个
注意：: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 或改用其他方案。 - 更稳妥的方式是用