HTML / CSS更改链接上的跨度颜色:焦点

我专注于链接时,尝试将跨度的颜色设置为橙色。跨度在: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;
}
评论
  • 麻辣烫
    麻辣烫 回复

    工作正常吗?

    .checklist a:active span {
      background-color: green;
    }
    
    .checklist a:focus span {
      background-color: green;
    }
    <div class="checklist categories">
        <ul>
            <li><a href="#"><span>All</span></a></li>
          </ul>
     </div>
  • kaut
    kaut 回复

    :focus和:focus-within仅对输入字段有效。