在EC2实例中使用CSS遇问题：HTML正常加载但CSS不生效求助

我来帮你梳理几个最可能的原因，按优先级一步步排查：

1. 先确认CSS文件的实际路径是否匹配链接 #

你的HTML文件放在/var/www/html目录里，而链接写的是../css/home.css——这个路径的意思是从当前HTML所在的html目录往上退一级（到/var/www），再进入css文件夹找home.css。

你可以先通过命令确认home.css的实际位置：

find /var/www -name "home.css"

• 如果文件确实在/var/www/css/home.css，那路径写法没问题，但要注意服务器是否允许访问网站根目录之外的文件；
• 但更常规的做法是把CSS文件夹放在网站根目录（也就是/var/www/html）下面，比如/var/www/html/css/home.css，这时候你的链接应该改成./css/home.css（相对当前HTML目录）或者直接/css/home.css（从网站根开始的绝对路径）。

2. 检查文件夹和文件的权限（包括父目录） #

虽然你的home.css权限是-rw-r--r--（允许所有用户读取），但还要确保CSS文件所在的文件夹以及上级目录的权限允许Web服务器进程（Ubuntu上Apache/Nginx默认用www-data用户）读取：

比如如果CSS在/var/www/css，先查看文件夹权限：

ls -ld /var/www/css

权限至少要是drwxr-xr-x（所有者可读写执行，其他用户可读可执行），如果不是，用命令修改：

sudo chmod 755 /var/www/css

同时也要确保/var/www目录的权限符合要求：

sudo chmod 755 /var/www

如果Web服务器用户不是ubuntu，还可以把文件所属组改成www-data，避免权限冲突：

sudo chown ubuntu:www-data /var/www/css/home.css

3. 检查Web服务器的DocumentRoot配置 #

如果你的CSS文件在/var/www目录下（不在/var/www/html里），而Apache/Nginx的DocumentRoot设置的是/var/www/html，服务器默认会阻止访问DocumentRoot之外的文件，这是安全限制。

以Apache为例，打开默认站点配置文件（通常是/etc/apache2/sites-available/000-default.conf），确认DocumentRoot是/var/www/html。如果要允许访问/var/www/css，需要添加一个<Directory>块：

<Directory /var/www/css>
    Require all granted
</Directory>

修改后重启Apache生效：

sudo systemctl restart apache2

不过更推荐的做法还是把CSS文件夹移到/var/www/html下面，这样更符合网站目录结构的最佳实践。

4. 用浏览器开发者工具排查请求状态 #

打开浏览器的开发者工具（按F12），切换到「网络」标签，刷新页面，找到home.css的请求，查看状态码：

• 如果是404 Not Found：说明路径不对，回到第一步重新确认文件位置；
• 如果是403 Forbidden：说明权限或服务器配置阻止了访问，回到第二步和第三步调整；
• 如果是200 OK但样式不生效：可能是CSS语法错误，或者浏览器缓存，试试强制刷新页面（Ctrl+Shift+R）。

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