CSS导航栏active类无法正常生效 当前页高亮功能异常

问题原因 #

• 未给对应导航元素挂载active类：你贴出的HTML代码里所有导航链接都没有加active类，浏览器无法识别需要高亮的元素。
• HTML语法错误：代码里写了两个<body>标签，第一个body标签未正确闭合就提前写了结束标签，属于无效结构，会导致浏览器渲染异常。
• CSS写法存在隐患：原代码的.active选择器没有限定作用在导航链接上，如果类加在父级li上，背景色容易被块级的a标签遮挡；同时选择器权重匹配度低，容易被其他导航样式覆盖。

修复步骤 #

1. 修正HTML结构，给当前页面对应的导航链接加active类
   以首页为例，修正后的正确结构如下，其他页面只需要把class="active"挪到对应指向自身的导航a标签上即可：

<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #4A4A8A;">
    <ul>
        <li><a href="index.html" class="active">Homepage</a></li>
        <li><a href="Motherboard.html">Motherboard</a></li>
        <li><a href="wacom_tablet.html">Wacom Drawing Tablet</a></li>
        <li><a href="assistive_technologies.html">Assistive Technologies</a></li>
        <li><a href="bibliography.html">Bibliography</a></li>
    </ul>

    <br><br><br><br><br><br>
    Homepage
</body>
</html>

2. 替换原有.active样式代码
   把CSS里原来的.active代码块替换成下面的内容，直接定位到带active类的导航链接，避免样式被覆盖、背景被遮挡的问题：

li a.active {
    background-color: #04AA6D;
    color: white;
}

如果需要调整鼠标悬停在当前激活导航项上的效果，可以额外加对应样式，比如想让悬停时颜色更深：

li a.active:hover {
    background-color: #038857;
}

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