CSS活动链接无法正常工作

Question

所以我有一个导航栏.使用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不是我最强的语言.

编辑:

但是感谢您的建议

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

也不起作用.

Answer 1

我看到这里有一个错误,因为它应该是,:active而不是.active,所以替换:

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

附:

.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>