Django搭建图片作品集网站时部分外部CSS未生效问题求助

核心原因定位 #

该问题是Django静态资源加载场景下的常见问题，本质是浏览器/服务端加载的CSS文件和本地编辑的CSS文件内容不一致导致，具体可按照以下顺序排查：

• 静态文件缓存未更新
  浏览器默认会缓存已加载的CSS文件，如果你是在已访问过页面后新增的#box样式，旧缓存的CSS文件中没有对应规则，自然不会生效。放在页面style标签内的样式不会走该缓存逻辑，因此可以正常生效。
• CSS文件语法截断
  如果你加载的CSS文件中，#box规则之前存在语法错误（比如前一个选择器的大括号未闭合、多行注释未正常关闭），会导致后续所有样式都无法被浏览器解析。单独把#box规则放到style标签内时没有前置语法错误，因此可正常应用。
• 静态文件路径不匹配
  你修改的CSS文件可能不是Django实际引用的文件：
  1. 若DEBUG = True，检查你编辑的entrance.css是否在对应app的static/entrance/目录下，或是在STATICFILES_DIRS配置包含的目录中
  2. 若DEBUG = False，检查是否执行过python manage.py collectstatic将修改后的静态文件同步到STATIC_ROOT目录

快速验证步骤 #

1. 打开Chrome开发者工具，切换到「网络」面板，筛选「CSS」类型，找到加载的entrance.css文件，点击预览查看文件内容，确认是否包含你写的#box相关样式
2. 若文件内容和本地一致，直接按Ctrl+Shift+R（Mac为Cmd+Shift+R）强制刷新页面跳过缓存加载
3. 若文件内容没有#box样式，核对你编辑的CSS文件路径是否正确，执行静态文件同步操作

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