直接用 li:last-child:hover 可精准匹配并样式化最后一个列表项，但需确保其为父元素的最后一个子节点；若存在其他类型节点，则改用 li:last-of-type:hover 更可靠。
只对最后一个列表项应用 hover 效果
直接用 :last-child:hover 就行，不需要额外包裹或 JS。这个组合选择器会精准匹配既是最后一个子元素、又处于悬停状态的 <li> 元素。
常见错误是写成 li:hover:last-child —— 这其实等价于 li:last-child:hover（CSS 中伪类顺序不影响匹配逻辑），但语义上容易误解为“先 hover 再判断是否 last”，实际浏览器按选择器整体匹配，所以两者行为一致。不过推荐写成 :last-child:hover，更符合阅读直觉。
- 必须确保目标
<li>确实是其父容器的最后一个子元素；如果后面有注释、空格文本节点或其它标签（比如</div>前的换行），:last-child可能不生效 - 若列表由 JS 动态插入，需确认 DOM 结构稳定后再测试
- 不支持 IE8 及更早版本（IE9+ 支持
:last-child）
ul li:last-child:hover {
background-color: #ffeb3b;
font-weight: bold;
}
当最后一个列表项不是 <li> 时怎么办
比如父元素里除了 <li> 还有 <p> 或注释，:last-child 就会失效，因为它选的是「最后一个子节点」，不区分类型。
此时改用 :last-of-type 更可靠——它只看元素类型，忽略文本节点和其它标签：
立即学习“前端免费学习笔记（深入）”；
-
:last-child：匹配父元素中最后一个子节点（无论是什么） -
:last-of-type：匹配父元素中该类型（如li）的最后一个元素 - 如果最后一个
<li>后面还有<div>，li:last-of-type:hover仍能命中它
ul li:last-of-type:hover {
border-bottom: 2px solid #2196f3;
}
与 JavaScript 的 hover 事件对比
CSS 的 :hover 是纯样式响应，无事件监听开销，性能更好；但无法做复杂交互（比如 hover 时发请求、修改其它无关元素）。
如果需要联动效果，例如 hover 最后一个 <li> 时高亮对应图表区域，就得用 JS：
- 监听父元素的
mouseover，再用event.target判断是否为最后一个li - 或提前用
document.querySelector('ul li:last-of-type')拿到元素，绑定addEventListener('mouseenter', ...) - 注意移动端没有真正 hover，
:hover在 iOS Safari 上仅在点击后短暂触发一次
const lastLi = document.querySelector('ul li:last-of-type');
if (lastLi) {
lastLi.addEventListener('mouseenter', () => {
lastLi.style.transform = 'scale(1.05)';
});
lastLi.addEventListener('mouseleave', () => {
lastLi.style.transform = 'scale(1)';
});
}
容易被忽略的继承与层叠问题
如果列表项本身有内联样式（style="background: red"）或更高优先级的 CSS 规则（比如 ID 选择器），:last-child:hover 的声明可能被覆盖。
调试时重点检查三点：
- 浏览器开发者工具中，看该规则是否被划掉（表示未生效）
- 确认 hover 状态下计算出的
background-color是否来自你写的规则 - 避免滥用
!important；更推荐提高选择器特异性，比如写成ul.menu li:last-child:hover
真实项目里，最后一个列表项常用于“查看更多”或“返回顶部”，它的 hover 行为往往要和整体导航风格一致，别只改颜色而忽略光标、过渡动画这些细节。
