EJS文件中CSS仅部分生效求助（body样式被覆盖）

以下是几个实用的排查方向和解决办法：

• 检查CSS选择器优先级冲突
  打开浏览器开发者工具（F12），选中<body>标签查看Styles面板：

  • 如果body { background: red; }样式被划掉，说明有更高优先级的选择器（比如内联样式、ID选择器、后续加载的CSS文件）覆盖了它。
  • 可以临时给body样式加!important（body { background: red !important; }）验证问题，更推荐的方式是优化选择器优先级，比如给body添加类名后用类选择器定义样式。

• 验证EJS渲染后的HTML结构
  右键查看页面源代码，确认：

  • <body>标签仅存在一个，没有被多个模板文件重复渲染。
  • main.css的<link>标签位于页面<head>中，且在其他CSS引入之前（避免后续加载的CSS覆盖样式）。

• 排查CSS文件语法错误
  如果main.css中body样式的代码前存在语法错误（比如未闭合的大括号、拼写错误的属性名），浏览器会跳过错误部分的解析，导致body样式失效，但后续的footer样式可能正常生效。
  可以直接在浏览器开发者工具的Sources面板打开main.css逐行检查，或者用本地的CSS校验工具排查问题。

• 清除浏览器缓存
  即使Network面板显示CSS加载正常，也可能是浏览器缓存了旧版本的CSS文件（其中没有body的红色背景样式）。
  解决办法：按Ctrl+F5强制刷新页面，或者在CSS引入路径后加版本号，比如：

  <link rel="stylesheet" href="/css/main.css?v=1.0.1">
  

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