如何通过CSS实现鼠标悬停<li>时选中<a>元素？

首先你写的CSS选择器逻辑完全错误，a ul:hover 表示a标签内部的ul元素被悬停时应用样式，但你的HTML里<a>和<ul>是同级关系，并非嵌套结构，所以这个选择器根本不会生效。

另外要明确：CSS只能选择后续同级元素或子元素，无法直接选中前面的同级元素。针对你的需求，分两种方案实现：

方案1：调整DOM结构实现纯CSS效果 #

如果可以修改HTML结构，给<a>和<ul>添加共同父容器，通过父容器的hover状态控制<a>的样式（若需精准悬停<li>时触发，这种方式会让鼠标进入父容器就生效，适合对触发范围要求不高的场景）：

修改后的HTML代码： #

<div class="link-list-wrapper">
  <a href="#">Link</a>
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
  </ul>
</div>

对应的CSS代码： #

/* 鼠标悬停在父容器内任意区域时，改变a的颜色 */
.link-list-wrapper:hover a {
  color: red;
}

如果需要仅当悬停<li>时才触发且坚持纯CSS，只能把<a>放到<ul>内部（比如作为第一个li的内容），但这可能不符合你的布局需求：

<ul>
  <li><a href="#">Link</a></li>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

/* 悬停整个ul时改变a的样式 */
ul:hover a {
  color: red;
}

方案2：JavaScript实现（无需修改DOM结构） #

如果不想调整HTML结构，用JS监听<li>的鼠标事件来控制<a>的样式：

JavaScript代码： #

// 获取所有li元素和目标a元素
const listItems = document.querySelectorAll('ul li');
const targetLink = document.querySelector('a');

// 给每个li添加悬停事件
listItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    targetLink.style.color = 'red';
  });
  item.addEventListener('mouseout', () => {
    targetLink.style.color = ''; // 恢复默认样式
  });
});

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