HTML与CSS文件未关联生效，Chrome sources栏已显示CSS文件如何解决

开发者阿泽

2026-9-29

问题原因

核心问题是CSS选择器与HTML元素的类名不匹配，导致样式无法命中目标元素：

HTML中导航容器的类名为Menu：<div class="Menu">
CSS中定义的导航样式选择器为.nav，和HTML的类名完全不一致，因此样式无法生效。

修复方案（二选一即可）

方案1：修改HTML代码

将导航容器的类名改为nav，和CSS选择器保持一致：

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Chapters</a>
  <a href="#">Contact Us</a>
</div>

方案2：修改CSS代码

将所有.nav选择器替换为.Menu，和HTML的类名保持一致：

.Menu {
  background: #fff;
  margin-left: -38px;
  overflow: hidden;
}

.Menu a{
  padding: 14px 16px;
  text-decoration: none;
  text-align: center;
  color: #000;
  font-size: 1.7em;
  display: block;
  float: left;
}

.Menu a:hover{
  background: #ddd;
  color: blue;
}