CSS 活动链接不起作用

所以我有一个导航栏。使用 Zurb 构建：

<div class="seven columns navigation" id="navigation">
    <a href="#">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

悬停时导航会更改背景颜色。很简单。但是，如果链接处于活动状态，我无法保留背景。因此，如果您位于第 1 页，它将保持蓝色背景。

这是我迄今为止尝试过的CSS。

.navigation a {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.navigation a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.navigation a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#navigation a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

它不起作用，我已经用谷歌搜索了这个负载，但它都说活动链接应该起作用？

谁能告诉我哪里出错了？很抱歉，简单的 CSS 不是我最擅长的语言。

EDIT:

不过还是谢谢你的建议

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

也不行。

我看到这里有一个错误，应该是这样:active并不是.active，所以替换：

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

With:

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

否则，如果您谈论的是每个页面都处于活动状态，那么您编写的 CSS 是正确的。在您的 HTML 中，您需要添加以下内容：

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

现在，该特定链接将显示为活动状态。如果您使用的是 HTML，则必须为每个页面完成此操作；如果您使用的是 PHP 等内容，则可以通过编程来完成此操作。所以，在 PHP 中同样的事情是：

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>