:last-child 只匹配父容器中最后一个同类型子元素；若末尾有其他标签（如<div>），则失效；推荐用li:last-of-type或li:nth-last-child(1)更可靠。
直接用 :last-child 就行，但得确认它真能选中你想要的那个“最后一个列表项”——很多时候它失效，不是语法错，而是 DOM 结构或元素类型不匹配。
为什么 :last-child 有时不生效
它只匹配父容器中「最后一个子元素」且「类型相同」（即同为 <li>）。如果列表末尾有其他元素（比如注释、空格文本节点不会影响，但 <div>、<p> 或 </> 注释后的非 <li> 元素），或者父容器里混着别的标签，:last-child 就会落到那个元素上，而不是最后一个 <li>。
- ✅ 正确结构：
<ul> <li>第一项</li> <li>第二项</li> <li>最后一项</li> </ul>
→li:last-child能命中 - ❌ 干扰结构：
<ul> <li>第一项</li> <li>第二项</li> <li>最后一项</li> <div class="footer">说明文字</div> </ul>
→li:last-child不生效，因为最后一个子元素是<div> - ⚠️ 注意：伪类不区分是否“可视”，哪怕
<li style="display:none">也在计数范围内
更稳妥的写法：用 :last-of-type 或 :nth-last-child(1)
当列表项之间可能插入其他标签（如广告 <li class="ad"> 或分隔线 <hr>），优先考虑语义更明确的替代方案：
-
li:last-of-type：只看<li>类型，忽略中间夹杂的其他标签 —— 只要最后一个<li>是该类型末位，就匹配 -
li:nth-last-child(1)：等价于:last-child，但可扩展（比如nth-last-child(2)选倒数第二项） - 若需兼容 IE8 及更早版本，只能靠 JS 或给末项加 class（如
class="last"），因为这些伪类都不支持
添加装饰的实际 CSS 写法示例
常见需求是加底边框、图标、背景色或特殊间距。注意避免影响布局流：
立即学习“前端免费学习笔记（深入）”；
ul li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
<p>/<em> 移除最后一项的底边框 </em>/
ul li:last-child {
border-bottom: none;
background-color: #f9f9f9;
font-weight: bold;
}- 如果用
margin-bottom控制间距，同样建议用:last-child清掉，防止多出空白 - 图标类装饰（如用
::after）也适用：li:last-child::after { content: "✓"; color: #4CAF50; } - 别在
:last-child里改height或flex相关属性，容易破坏对齐，尤其在display: flex的列表容器中
真正要注意的是：别默认 :last-child 就等于“视觉上最后一个列表项”。先检查渲染后的实际 DOM 子节点顺序和类型，再决定用哪个伪类——有时候加个 console.log(el.parentNode.children) 比翻文档更快。
