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

Question

看不出为什么a:active不起作用！希望链接按钮在活动时保持蓝色（#1770b8），与悬停状态相同。[在 Firefox、IE 和 Chrome 中尝试过]

我做了什么傻事吗？！

a:hover - 悬停工作正常。

a:link - 按钮是黑色的，所以这有效。

a:visited - 按钮保持黑色（不默认为灰色），因此可以正常工作。

.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;
}

标签： csscss-selectors

Answer 1

你告诉活动链接有一个color白色的前景和一个background-color与悬停状态相同的 a （蓝色，#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/