HTML / CSS更改链接上的跨度颜色：focus

Question

当我专注于链接时，我试图将跨度的颜色设置为橙色。跨度在：active上更改颜色，但是当我使用：focus时似乎什么也没有发生。我希望仅使用html和CSS执行此操作。预先感谢。

HTML：

<div class="checklist categories">
    <ul>
        <li><a><span></span>All</a></li>
      </ul>
 </div>   

CSS：

.checklist a:active span {
  background-color: $color-orange;
}

.checklist a:focus span {
  background-color: $color-orange;
}

Answer 1

：focus和：focus-within仅用于关注输入字段。

Answer 2

它工作正常吗？

.checklist a:active span {
  background-color: orange;
}

.checklist a:focus span {
  background-color: orange;
}

<div class="checklist categories">
    <ul>
        <li><a href="#"><span>All</span></a></li>
      </ul>
 </div>