导航hover与激活状态仅首页生效问题求助

嘿，我来帮你搞定这个导航样式的问题！从你描述的情况和给出的CSS来看，大概率是下面几个常见问题导致的，咱们一步步排查：

1. 首先检查ID拼写是否一致 #

你CSS里写的选择器是#meni li a:hover和#meni li.active a，先去核对一下HTML里导航容器的ID是不是meni（注意是e结尾不是u）！很多人会不小心把menu写成meni，如果HTML里是<nav id="menu">，那CSS里的选择器就完全匹配不上，自然只有首页可能因为巧合或者之前的测试生效，其他页面都不行。

2. 确认其他页面的Active类是否正确添加 #

首页的导航项能保持深色，说明首页对应的<li>标签上有active类，比如：

<li class="active"><a href="/">首页</a></li>

那其他页面呢？比如“关于我们”页，对应的导航<li>必须也加上active类，像这样：

<li class="active"><a href="/about">关于我们</a></li>

如果是静态HTML页面，你需要手动给每个页面的当前导航项加active类；如果是动态页面（比如PHP、Node.js渲染），则需要通过后端逻辑判断当前页面路径，自动给对应导航项加上这个类。

3. 排查CSS样式被覆盖的情况 #

有时候不是样式没写对，而是有其他优先级更高的CSS规则把你的样式覆盖了。你可以用浏览器的开发者工具（按F12）来检查：

• 打开其他页面，选中导航项的<a>标签
• 在“样式”面板里找你写的#meni li.active a规则，如果这条规则被划掉了，说明上面有更具体的选择器（比如.header #menu li a）或者带!important的规则把它覆盖了。
• 解决方法：要么优化你的选择器，让它优先级更高（比如加上父元素的类，写成.site-header #meni li.active a），要么暂时用!important应急（不推荐长期用，尽量靠优先级解决）：

  #meni li a:hover { color: #000 !important; }
  #meni li.active a { color: #000 !important; }
  

4. 确认浏览器处于标准渲染模式 #

虽然你说加了DOCTYPE，但还是要确认一下是不是标准的HTML5声明：

<!DOCTYPE html>

如果DOCTYPE写错或者缺失，浏览器会进入怪异模式，CSS渲染会出现各种奇怪的问题。你可以在开发者工具的控制台输入document.compatMode，如果返回CSS1Compat就是标准模式，返回BackCompat就是怪异模式，这时候就要修正DOCTYPE。

按照上面的步骤排查，应该就能解决问题啦！

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