为何CSS文件会相互覆盖？待办页面导航栏样式异常排查

核心排查点 #

• 核对待办页面导航栏的DOM结构，必须和番茄钟/主页完全一致，包括类名、嵌套层级、标签类型。比如番茄钟页面用<header class="main-nav">，待办页面就不能写成<div class="navbar">，哪怕一个字符的差异都会导致共用样式失效。
• 检查CSS引入顺序：待办页面必须先引入共用的style.css，再引入页面专属的todo_style.css。顺序颠倒会导致样式优先级冲突，比如专属CSS的样式被共用CSS覆盖，或者反过来破坏导航栏样式。
  正确引入示例：

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="todo_style.css">
  

• 排查todo_style.css是否存在意外覆盖导航栏样式的代码，比如误写了header、.main-nav这类共用选择器的样式，或者使用了更高优先级的选择器（如body header.main-nav）覆盖了共用样式。

具体修复方案 #

1. 直接复用导航栏HTML结构
   把番茄钟页面中能正常显示的导航栏代码直接复制到待办页面，避免手动编写带来的结构差异。示例结构：

   <header class="main-nav">
     <div class="nav-wrapper">
       <a href="index.html" class="nav-brand">StudyTool</a>
       <ul class="nav-menu">
         <li><a href="pomodoro_index.html">番茄钟</a></li>
         <li><a href="todo_html.html" class="current-page">待办清单</a></li>
       </ul>
     </div>
   </header>
   

2. 修正样式优先级冲突
   如果todo_style.css里确实有需要保留的全局样式，但意外影响了导航栏，可以在共用style.css的导航栏选择器中提高优先级：

   /* style.css 中增强导航栏样式优先级 */
   header.main-nav {
     background-color: #34495e;
     height: 65px;
     padding: 0 20px;
     /* 若仍被覆盖，可临时使用!important（尽量少用） */
     background-color: #34495e !important;
   }
   

3. 利用开发者工具定位问题
   打开浏览器F12开发者工具，选中待办页面的导航栏元素，查看Styles面板：

   • 确认style.css的导航栏样式是否被加载（灰色划掉表示被其他样式覆盖）
   • 找到来自todo_style.css的冲突样式，删除或修改对应的规则。

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