html - 事件 CSS 未被识别

Question

感觉我遗漏了一些简单的东西，但我盯着它看的时间太长了，所以非常感谢任何帮助。

有一个水平导航，我希望元素在事件/当前页面时具有不同的背景颜色。我尝试了各种类标签但没有成功。请注意，我不能只使用 .active 标签，因为我需要它仅在添加的导航上运行。

这是我所拥有的和我尝试过的:

CSS 代码

.nav2 {
  border: 1px solid #e7e7e7;
  border-width: 1px 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
  overflow: hidden;
}
.nav2 li {
  Float: left;
}
.nav2 a {
  display: block;
  padding: 10px 20px;
  color: #666;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  font-size: 16px;
  text-decoration: none;
}
.nav2 a:active {
  background-color: #0066CC;
  color: white;
}
.nav2 a:hover {
  background-color: #555;
  color: white;
}

---

尝试 1(仅在 LI 标签中有效)

<ul class="nav2">
   <li class="active"><a href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

尝试 2(仅在 A 标签中有效)

<ul class="nav2">
   <li><a class="active" href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

尝试 3(在 LI 标签中)

<ul class="nav2">
   <li class="nav2 active"><a href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

尝试 4(在 A 标签中)

<ul class="nav2">
   <li><a class="nav2 active" href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

我错过了什么？

Answer 1

你需要一个活跃的类:

.active  {background-color: #0066CC; color: white;}