如何使链接的活动状态（在CSS中）正常工作？

Question

看不到为什么 a：active 无法正常工作！ 希望链接按钮在活动时保持蓝色（＃1770b8），与悬停状态相同。 [在Firefox，IE和Chrome中尝试过]

我做了些愚蠢的事吗？！

a：悬停  -悬停效果很好。

a：链接  -按钮为黑色，因此可以使用。

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/