首页 > 文章 > 前端

CSS如何实现悬停最后一个列表项样式变化

时间：2026-02-03 13:27:43 224浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《CSS 中，如果你想让列表中的最后一个列表项在鼠标悬停时发生样式变化，可以使用 :last-child 和 :hover 选择器组合。不过需要注意的是，:hover 是作用于元素本身，而不是其子元素。因此，正确的写法是将 :hover 应用于包含列表项的父容器，或者直接对最后一个列表项应用 :hover。正确用法示例：/* 当鼠标悬停在列表项上时 */ li:hover { background-color: #f0f0f0; } /* 只对最后一个列表项在悬停时变化 */ li:last-child:hover { background-color: #ffcc00; }说明：li:last-child 会选择所有

元素中作为其父元素最后一个子元素的那个。:hover 会在这个元素被鼠标悬停时触发。注意事项：如果你的 HTML 结构中，

不是父元素的最后一个子元素（例如，后面还有其他非

的元素），那么 :last-child 会选择那个非

的元素，而不是你期望的最后一个

。如果你需要更精确地选择最后一个

，可以结合 :nth-last-child(1) 或者使用 JavaScript 来处理。示例 HTML 结构：》

，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

直接用 li:last-child:hover 可精准匹配并样式化最后一个列表项，但需确保其为父元素的最后一个子节点；若存在其他类型节点，则改用 li:last-of-type:hover 更可靠。

css 想让列表项最后一个在 hover 时变化怎么办_组合 :last-child 与 :hover 设置

只对最后一个列表项应用 hover 效果

直接用 :last-child:hover 就行，不需要额外包裹或 JS。这个组合选择器会精准匹配既是最后一个子元素、又处于悬停状态的

元素。

常见错误是写成 li:hover:last-child —— 这其实等价于 li:last-child:hover（CSS 中伪类顺序不影响匹配逻辑），但语义上容易误解为“先 hover 再判断是否 last”，实际浏览器按选择器整体匹配，所以两者行为一致。不过推荐写成 :last-child:hover，更符合阅读直觉。

必须确保目标
确实是其父容器的最后一个子元素；如果后面有注释、空格文本节点或其它标签（比如

前的换行），:last-child 可能不生效

若列表由 JS 动态插入，需确认 DOM 结构稳定后再测试

不支持 IE8 及更早版本（IE9+ 支持 :last-child）

ul li:last-child:hover {
  background-color: #ffeb3b;
  font-weight: bold;
}

当最后一个列表项不是
时怎么办

比如父元素里除了

还有

或注释，:last-child 就会失效，因为它选的是「最后一个子节点」，不区分类型。

此时改用 :last-of-type 更可靠——它只看元素类型，忽略文本节点和其它标签：

:last-child：匹配父元素中最后一个子节点（无论是什么）
:last-of-type：匹配父元素中该类型（如 li）的最后一个元素
如果最后一个
后面还有
，li:last-of-type:hover 仍能命中它

ul li:last-of-type:hover {
  border-bottom: 2px solid #2196f3;
}

与 JavaScript 的 hover 事件对比

CSS 的 :hover 是纯样式响应，无事件监听开销，性能更好；但无法做复杂交互（比如 hover 时发请求、修改其它无关元素）。

如果需要联动效果，例如 hover 最后一个

时高亮对应图表区域，就得用 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)';
  });
}