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

Question

我正在使用这样的 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;
}

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

Answer 1

您可能正在寻找以不同颜色聚焦菜单中的活动链接。a:active不打算用于此目的的头脑。

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

Answer 2

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

Answer 3

只有当您单击它时才会应用活动。像这样做：

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

然后样式化

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