仅在选项卡上显示元素轮廓，而不是在单击时显示

Question

如果我去developer.mozilla.org并通过下拉菜单选项卡，我会得到带有轮廓的元素，这对于可访问性来说是完全没问题的：

但是如果我点击它，我不会得到大纲：

我试图通过只使用伪类 :focus 来实现这一点，排除 :active 但它仍然不起作用：

a {

  color: @brand-link;

  &:focus:not(:active) {

    outline: -webkit-focus-ring-color auto 5px;

  }

  &:active {

    outline: none;

  }

}

任何人都知道如何仅针对选项卡导航而不是针对单击元素严格实现大纲？

顺便说一下，我用得少了。

这是一个例子，如果你点击它，它会勾勒出gold彩色的轮廓：

a:focus {

   outline: 4px solid gold;

}

a:active {

  outline: none;

}

<a href="/">FOO LINK</a>

我希望金色仅在选项卡导航上可见，但在单击元素时不可见

Answer 1

试试这个a {&nbsp; color: @brand-link;&nbsp; &:focus {&nbsp; &nbsp; outline: none;&nbsp; }}