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：主动选择器指的是链接的活动状态，而不是活动页面。

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 2

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

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

Answer 3

仅在您单击时应用活动。这样做：

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

然后设计它

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

在css代码中：active不起作用

3 个答案: