css - 为什么 a:active 不能在侧边栏小部件中工作？

Question

我的css中有以下内容：

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

这在我的sidebar.php中：

<h2 class="big">Categories</h2>
<ul class="categories-widget">
   <?php
   global $parent_id;
   wp_list_categories('show_count=1&title_li=&child_of='.$gateway_parent_id.'&show_count=0&hide_empty=0'); ?>
</ul>

a:hover 有效，但 a:active 无效。是否有一个原因？我能做些什么来修复它？

Answer 1

它不会工作，因为你有：

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

当鼠标光标当前按下元素时， :active 伪选择器将匹配。所以它正在做同样的事情..

尝试 ：

.categories-widget li a:hover { text-decoration: underline; }

.categories-widget li a:active {
position:fixed;
padding-top:1px;
color:red;
}