如何用CSS修改HTML嵌套列表的悬停颜色（不可编辑HTML）

核心思路 #

借助CSS子选择器、:not()伪类与:last-child伪类精准定位元素，无需修改HTML结构即可实现需求。

完整CSS代码 #

/* 除最后一个顶级<li>外，其余顶级<li>及其内部所有元素悬停变蓝色 */
ul > li:not(:last-child):hover,
ul > li:not(:last-child) *:hover {
  color: blue;
}

/* 最后一个顶级<li>及其内部所有元素悬停变橙色 */
ul > li:last-child:hover,
ul > li:last-child *:hover {
  color: orange;
}

代码说明 #

• ul > li：仅选中顶级<li>元素，避免误匹配嵌套列表的父级<li>
• :not(:last-child)：排除最后一个顶级<li>
• *：匹配目标<li>内部所有嵌套元素（含子列表的<li>、<a>等）
• :hover：在元素悬停时触发样式

若需仅针对嵌套列表的<li>元素（而非所有内部元素）调整样式，可将*替换为ul li：

ul > li:not(:last-child):hover,
ul > li:not(:last-child) ul li:hover {
  color: blue;
}

ul > li:last-child:hover,
ul > li:last-child ul li:hover {
  color: orange;
}

内容的提问来源于stack exchange，提问作者edumarrom