如何修复CSS中active link（激活链接）失效问题？

我是网页开发新手，正在用W3school spaces搭建项目网站，现在尝试设置导航栏的激活链接样式，但始终无效。导航栏各链接hover颜色不同是项目评分规则要求。

当前代码 #

HTML（所有页面结构一致，仅对应页面的导航项需修改） #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navbar"> 
<ul> 
    <li id="link1"><a href="home.html">Home</a></li>
    <li id="link2"><a href="info.html">Info</a></li>
    <li id="link3"><a href="photo.html">Photos</a></li>
    <li id="link4"><a href="credit.html">Credits</a></li>
</ul> 
</div>
</body>
</html>

CSS 代码 #

ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #0000ff; 
}

#navbar ul #link3 a:hover { 
    background-color: #BB29BB; 
}

#navbar ul #link4 a:hover { 
    background-color: #28C622; 
}

a:active {
  background: #29abe2;
}

已尝试的无效方案 #

• 方案一：

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

• 方案二：

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

解决方法 #

核心问题 #

你混淆了CSS里的a:active和页面激活状态：a:active仅表示链接被点击的瞬间的样式，而你需要的是当前页面对应的导航项保持高亮的状态，这在多页面场景下需要手动给对应链接加标识类。

步骤1：修改每个页面的HTML #

每个页面只给对应导航项的<a>标签添加class="active"：

• home.html中：

  <li id="link1"><a href="home.html" class="active">Home</a></li>
  

• info.html中：

  <li id="link2"><a href="info.html" class="active">Info</a></li>
  

• photo.html中：

  <li id="link3"><a href="photo.html" class="active">Photos</a></li>
  

• credit.html中：

  <li id="link4"><a href="credit.html" class="active">Credits</a></li>
  

步骤2：添加激活状态的CSS样式 #

由于你之前的hover样式用了高优先级选择器，激活样式的选择器优先级要足够才能生效，添加以下CSS到styles.css：

/* 统一设置所有导航项的激活状态 */
#navbar ul li a.active {
    background-color: #29abe2;
    color: #fff;
    border-radius: 5px;
}

如果需要给不同激活项设置不同样式（和hover对应），也可以单独写：

#navbar ul #link1 a.active { background-color: #29abe2; }
#navbar ul #link2 a.active { background-color: #29abe2; }
#navbar ul #link3 a.active { background-color: #29abe2; }
#navbar ul #link4 a.active { background-color: #29abe2; }

为什么之前的方案无效？ #

1. 方案一：.navigation选择器和你HTML中的id="navbar"不匹配，且a:active是点击瞬间状态，不是页面激活状态；
2. 方案二：:target伪类匹配的是URL锚点对应的页面元素，你页面中没有对应ID的元素，且多页面场景下不适用这种方式。

内容的提问来源于stack exchange，提问作者needhelpforschool