div背景色设置不生效，nav类使用#22223b作为背景无效果如何解决？

架构老林

2026-9-27

可能的故障原因及修复方案

HTML结构语法错误
你提供的HTML代码中最外层.header容器缺少闭合的</div>标签，浏览器解析DOM结构时可能出现异常，导致CSS选择器匹配失败。先在代码末尾补全对应闭合标签即可。
样式优先级冲突
现有.nav选择器的优先级可能低于其他冲突的样式规则（比如其他位置写了.header .nav、行内样式、带!important的同属性规则）。你可以按下F12打开浏览器开发者工具，选中.nav元素查看样式面板，若background-color属性被划掉即为被覆盖。
可以通过提升当前规则优先级解决：
```
/* 选择器更具体，优先级更高 */
.header .nav {
  background-color: #22223b;
}
```
父元素高度塌陷
如果.nav内部的ul、li元素设置了浮动属性，父元素没有设置高度也没有做清除浮动处理的话，.nav的高度会坍缩为0，背景色自然无法显示。可以通过触发BFC清除浮动解决：
```
.nav {
  background-color: #22223b;
  overflow: hidden;
}
```
也可以使用伪元素清除浮动，兼容性更好。
CSS加载异常
检查你的CSS文件是否正确引入到HTML中，<link>标签的文件路径是否书写正确；如果是内联样式，检查<style>标签的语法是否存在错误。
浏览器缓存问题
按下Ctrl+F5强制刷新页面，清除本地缓存后重新加载，排除旧CSS缓存导致的样式未更新问题。