Eclipse中CSS文件无法链接 HTML页面样式不生效问题求助

问题复现 #

现有HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Resources Test </title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<h1> This is a HTML resource. </h1>
</body>
</html>

对应的CSS代码：

h1{
    background-color: red;
}

项目源码目录下HTML和css文件夹同级，访问页面样式不生效，修改href为../css/demo.css也无法解决。

可行解决方案 #

• 检查资源部署同步情况
  双击Eclipse Servers面板中使用的Tomcat服务，点击Open launch configuration，切换到Arguments标签页，找到catalina.base对应的本地路径，进入该路径下的wtpwebapps/你的项目名称目录，确认是否存在css文件夹及内部的demo.css文件。如果不存在，右键项目选择Properties→Deployment Assembly，添加WebContent目录（静态资源根目录）映射到根路径/，保存后重新部署项目重启服务即可。
• 修正CSS路径写法
  若HTML文件存放在WebContent根目录，css文件夹也在WebContent根目录，推荐两种写法：
  1. 项目绝对路径：href="/你的项目访问路径/css/demo.css"
  2. 相对路径：href="./css/demo.css"
     你之前使用的../css/demo.css是向上跳转一级目录寻址，HTML在根目录时该路径会寻址到项目上级目录，自然找不到对应文件。
• 验证资源可访问性+清除缓存
  直接在浏览器地址栏输入http://localhost:你的服务端口/你的项目访问路径/css/demo.css，如果可以正常访问到CSS内容，按Ctrl+F5强制刷新页面清除浏览器缓存即可生效。如果访问返回404，打开浏览器F12控制台的Network标签，查看CSS请求的实际路径，对应调整href的层级即可。
• 检查静态资源拦截配置
  如果项目配置了全局请求拦截Servlet（如SpringMVC的DispatcherServlet），需要添加静态资源放行规则：
  1. web.xml配置方式：添加default Servlet放行静态资源

  <servlet-mapping>
      <servlet-name>default</servlet-name>
      <url-pattern>*.css</url-pattern>
  </servlet-mapping>
  

  2. Spring配置方式：添加资源映射

  <mvc:resources mapping="/css/**" location="/css/"/>
  

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