在 css 代码中 a:active 不起作用答案

【问题标题】：In css code a:active is not working在 css 代码中 a:active 不起作用
【发布时间】：2012-12-12 11:12:43
【问题描述】：

我正在使用这样的 CSS 代码

.top_nav ul li a{ 
  color: #444; background: #111;
}
.top_nav ul li a:hover{
  color: #fff; background: #555;
}
.top_nav ul li a:active{
  color: #111; background: #fff;
}

但问题是，当任何页面处于活动状态时，导航菜单上的链接背景不会改变。该链接的背景与其他链接的背景相同。

【问题讨论】：

能否提供更多代码或链接？

标签： css menu background navigation hover

【解决方案1】：

您可能正在寻找以不同颜色聚焦菜单中的活动链接。请注意a:active 并非用于此目的。

链接仅在单击时占用a:active 状态，因此您只能在几秒钟内看到更改。您应该寻找一种不同的方式来完成它，例如为从服务器端脚本中选择的菜单项添加一个新的 css 类。

【讨论】：

点击后只要按住鼠标按钮，您就会看到活动状态。
对。我在通常的上下文中指出，人们只是单击一个按钮而不是按住它。

【解决方案2】：

只有当你点击它时才会应用活动。这样做：

<li><a href="" class="active">Link</a></li>

然后设置样式

top_nav ul li a.active {
   color: #111;
   background: #fff;
}

【讨论】：

【解决方案3】：

a:active 选择器指的是链接的活动状态，而不是您的活动页面。

http://www.w3schools.com/cssref/sel_active.asp

您必须为您当前正在查看的页面的菜单项设置一些“活动页面”类，并在您的 CSS 中引用它。

如果您有静态 HTML 页面，您可以在导航项中添加一个类来表示当前活动页面：

<li class="current">...</li>

然后将您的 css 更改为：

.top_nav ul li.current a {
  color: #111; background: #fff;
}

【讨论】：

谢谢，但我在简单的 html 和 css 中这样做，意味着在静态页面上使用不是动态的
那么你的“活动页面”是什么？如果您有多个静态页面，请添加导航列表项，例如：<li class="active">..</li> 并将您的 css 更改为 .top_nav ul li.active a { ...
一起删除了我的评论，因为你说了同样的话。 @FarazKhan，作为旁注，这是使用 php alistapart.com/articles/keepingcurrent 做同样事情的一种非常简单的方法
使用来自这些 cmets 的新信息更新了我的原始答案。