HTML / CSS-使用span和on：focus的清单

Question

当我'：focus'在链接上时，我试图将范围框的颜色设置为红色。跨度在'：active'上改变颜色，但是当我使用'：focus'时似乎什么也没有发生。类别将在使用角度的点击时输出不同类型的产品。目前，当我单击其中一个过滤器时，没有任何迹象表明类别之一已被激活，从而严重影响了UX。我希望仅在可能的情况下使用html和css进行此操作。

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

.checklist ul li{   
    font-size:14px;
    font-weight:400;
    list-style:none;
  padding: 7px 0 7px 23px;
  cursor: pointer;
}
.checklist li span{
    float:left;
    width:11px;
    height:11px;
    margin-left:-23px;
    margin-top:4px;
    border: 1px solid #d1d3d7;
  position:relative;    
}

.checklist li a{
    color:#676a74;
    text-decoration:none;   
}
.checklist li a:hover{  
    color:#222;
}

.categories a:hover span{   
    border-color:#a6aab3;
}

.checklist .checked span{
    border-color:#8d939f;
}

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

// This code below is the issue as :focus seems to do nothing

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

Answer 1

我已使用Angular和打字稿为此提供了解决方案：

Code