锚点标签获焦时如何修改列表项背景？提升列表可访问性

这个问题的核心原因很明确：焦点实际落在了<a>标签上，而非<li>元素。你原来的CSS是给.list-item添加:focus规则，但<li>默认不属于可聚焦元素，所以这条规则根本不会触发；而:hover能生效，是因为鼠标悬停时<li>是直接的触发载体。

下面给你两种解决方案，优先推荐第一种，更符合现代CSS规范与可访问性要求：

方案一：使用:focus-within伪类（推荐） #

:focus-within是CSS的实用伪类——当元素本身或它的任意子元素获得焦点时，该伪类就会触发。完美适配我们的场景：当<a>获焦时，它的父元素<li>会被:focus-within选中，从而同步改变背景色。

修改后的CSS代码如下：

.main-list{ padding: 10px; margin: 0 10px; }
.main-list .list-item{ 
  list-style-type: none; 
  background: #ccc; 
  padding: 10px; 
  border-bottom: 1px solid #333; 
  cursor: pointer; 
}
/* 替换原有的:focus为:focus-within */
.main-list .list-item:hover, 
.main-list .list-item:focus-within{ 
  background: #ddd; 
}
/* 可选：优化锚点焦点样式，提升可访问性 */
.main-list .list-item a:focus{
  /* 若要去掉默认outline，务必替换为自定义焦点样式，比如： */
  outline: 2px solid #555;
  outline-offset: 2px;
}

这个方案无需修改HTML，完全适配键盘导航的可访问性需求，所有现代浏览器均支持（IE除外，若无需兼容IE，直接用此方案即可）。

方案二：给<li>添加tabindex（兼容旧浏览器） #

如果必须兼容不支持:focus-within的旧浏览器（如IE），可以给<li>添加tabindex="0"，让它成为可聚焦元素，这样:focus规则就能触发。不过该方法存在小缺陷：用户按Tab键时，会先聚焦到<li>，再聚焦到内部的<a>，出现两次焦点切换，体验不如方案一。

修改后的HTML：

<ul class="main-list">
<li class="list-item" tabindex="0"><a href="#">dummy text</a></li>
<li class="list-item" tabindex="0"><a href="#">dummy text</a></li>
<li class="list-item" tabindex="0"><a href="#">dummy text</a></li>
<li class="list-item" tabindex="0"><a href="#">dummy text</a></li>
</ul>

CSS可保留你原有的代码，或补充:focus样式，但同样要注意焦点样式的可访问性——不要让键盘用户丢失焦点视觉提示。

可访问性提示 #

无论采用哪种方案，都不要直接移除<a>标签的默认outline且不做替代——这会导致键盘导航的用户无法识别当前焦点位置，严重影响可访问性。自定义焦点样式要清晰可见，比如加粗边框、区分度高的颜色等。

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