Показывать контур элемента только на вкладке, но не при нажатии

Question

Если я захожу на developer.mozilla.org и просматриваю выпадающие списки, я получаю элементы с контуром, который полностью подходит для доступности:

Но если я нажму на нее, я не получу набросок:

Я пытался добиться этого, используя только псевдокласс: focus, excluiding: 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

:active - это псевдокласс, который срабатывает при нажатии.

a:link:active{outline:10px dotted #000;}

покажет именно этот клик. jsfiddle для вас, чтобы увидеть .
Очень информативный пост о различиях между :hover, :active и :focus.

:link представляет элемент, который еще не был посещен. ссылка

EDIT:
Решение тогда:

a:focus:not(:link:active) {  
outline: -webkit-focus-ring-color auto 5px;  
}

Answer 2

Попробуйте это

a {
  color: @brand-link;

  &:focus {
    outline: none;
  }

}