Как заставить активное состояние ссылки (в CSS) работать?

Question

Не могу понять, почему a: active не работает!Хотите, чтобы кнопка ссылки оставалась синей (# 1770b8), когда она активна, так же, как и при наведении.[Попробовал в Firefox, IE и Chrome]

Я сделал что-то глупое?так что это работает.

a: посещения - кнопка остается черной (не по умолчанию серый), так что это работает.

.woocommerce-MyAccount-navigation li a:link,
.woocommerce-MyAccount-navigation li a:visited {
    padding:5px;
    display:block;
    width:150px;
    color:#ffffff;
    background-color:#000 !important;
    border:1px solid #000;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:active {
    padding:5px;
    display:block;
    width:150px;    
    color:#ffffff;        
    background-color:#1770b8 !important;
    border:1px solid #000;
}

Answer 1

Вы указываете, что активная ссылка имеет передний план color белого и background-color, который совпадает с состоянием наведения (голубоватый цвет, # 1770b8).Это делает невозможным увидеть разницу в штатах.

Если вы разделите состояние :active на новую инструкцию стиля, вы увидите, что она работает.Например, я установлю активный цвет переднего плана для ссылки на красный:

.woocommerce-MyAccount-navigation li a:link,
.woocommerce-MyAccount-navigation li a:visited {
  padding: 5px;
  display: block;
  width: 150px;
  color: #ffffff;
  background-color: #000 !important;
  border: 1px solid #000;
}

.woocommerce-MyAccount-navigation li a:hover {
  padding: 5px;
  display: block;
  width: 150px;
  color: #ffffff;
  background-color: #1770b8 !important;
  border: 1px solid #000;
}

.woocommerce-MyAccount-navigation li a:active {
  color: red;
}

<div class="woocommerce-MyAccount-navigation">
  <li><a href="#">test link</a></li>
</div>

https://jsfiddle.net/upomysez/