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

Posted 2023-03-06

【中文标题】HTML/CSS - 使用 span 和 on 的清单：focus

【英文标题】：HTML/CSS - Checklist using span and 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?”

【参考方案1】：

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

Code