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

【问题标题】：HTML/CSS - Checklist using span and on :focusHTML/CSS - 使用 span 和 on 的清单：focus
【发布时间】：2020-09-12 10:40:38
【问题描述】：

当我 ':focus' 在链接上时，我试图将跨度框的颜色设置为红色。跨度在 ':active' 上改变颜色，但当我使用 ':focus' 时似乎没有发生任何事情。类别将使用 Angular 在点击时输出不同类型的产品。目前，当我单击其中一个过滤器时，没有迹象表明其中一个类别已被激活，这严重影响了用户体验。我希望仅在可能的情况下使用 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;
}

【问题讨论】：

您的选择器 - .checklist span:focus span - 错误，看起来应该是：.checklist a:focus span。此外，:active 和 :focus 可能具有相当的特异性。
我刚刚意识到，对此感到抱歉。我将其更改为应有的样子，但不幸的是，这仍然没有给我想要的结果。
顺便提一下，Eric Meyer 早在（2007 年）就提到了这一点：“Who ordered the Link States?”

标签： html css angular css-selectors pseudo-element

【解决方案1】：

我得到了一个使用 Angular 和 typescript 的解决方案：

Code

【讨论】：